diff options
Diffstat (limited to 'files/zh-cn/web/accessibility')
14 files changed, 1813 insertions, 0 deletions
diff --git a/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..ac91393cc0 --- /dev/null +++ b/files/zh-cn/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,222 @@ +--- +title: 可访问的Web应用程序和小部件概述 +slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +<p>web正在变化。静态的、基于页面的站点逐渐被动态站点所取代，桌面式的web应用由大量的JavaScript和AJAX组成。设计人员完全可以通过JavaScript，HTML和CSS的组合创建令人惊叹的新的小部件和控件。这种转变有可能显着提高网络的响应能力和可用性，但是由于可访问性差距，存在许多用户有无法享用这种好处的风险。用户无法访问传统上JavaScript对于诸如屏幕阅读器等辅助技术，但是现在有了创建动态Web用户界面的方法，可以被各种用户访问。</p> + +<h2 id="问题">问题</h2> + +<p>大多数JavaScript工具包提供了模拟类似桌面界面行为的客户端小部件库。 滑块，菜单栏，文件列表视图等可以通过JavaScript，CSS和HTML的组合构建。 由于HTML 4规范不提供语义上描述这些窗口小部件的内置标签，因此开发人员通常会使用通用元素（如<div>和<span>）。 虽然这导致了一个看起来像桌面对应的小部件，但标记中通常没有足够的辅助技术可用的语义信息。 网页上的动态内容对于无论何种原因无法查看屏幕的用户来说都是特别有问题的。 股票行情，实时twitter消息更新，进度指示器和类似内容以辅助技术（AT）可能不知道的方式修改DOM。 那就是<a href="/en/ARIA" title="ARIA">ARIA</a>存在的意义。</p> + +<p><em>Example 1: Markup for a tabs widget built without ARIA labeling. There's no information in the markup to describe the widget's form and function.</em></p> + +<pre class="brush: html"><code><!-- This is a tabs widget. How would you know, looking only at the markup? --> +<ol> + <li id="ch1Tab"> + <a href="#ch1Panel">Chapter 1</a> + </li> + <li id="ch2Tab"> + <a href="#ch2Panel">Chapter 2</a> + </li> + <li id="quizTab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <div id="ch1Panel">Chapter 1 content goes here</div> + <div id="ch2Panel">Chapter 2 content goes here</div> + <div id="quizPanel">Quiz content goes here</div> +</div></code></pre> + +<p><em>Example 2: How the tabs widget might be styled visually. Users might recognize it visually, but there are no machine-readable semantics for an assistive technology.</em><br> + <img alt="Screenshot of the tabs widget" class="default internal" src="/@api/deki/files/4926/=Tabs_Widget.png"></p> + +<h2 id="ARIA">ARIA</h2> + +<p><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, 来自W3C的网络无障碍计划（<a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a>） 的可访问的富互联网应用程序（<strong>Accessible Rich Internet Applications）规范，</strong>提供了一种添加辅助技术（如屏幕阅读器）所需的缺少语义的方法。ARIA使开发人员可以通过向标记添加特殊属性来更详细地描述其小部件。 旨在填补在动态web应用在发现的标准HTML标签与桌面式控件之的差距，ARIA提供了角色和状态以描述大多数常见的UI小部件的行为。</p> + +<p>The ARIA specification is split up into three different types of attributes: roles, states, and properties. Roles describe widgets that aren't otherwise available in HTML 4, such as sliders, menu bars, tabs, and dialogs. Properties describe characteristics of these widgets, such as if they are draggable, have a required element, or have a popup associated with them. States describe the current interaction state of an element, informing the assistive technology if it is busy, disabled, selected, or hidden.</p> + +<p>ARIA attributes are designed to be interpreted automatically by the browser and translated to the operating system's native accessibility APIs. When ARIA is present, assistive technologies are able to recognize and interact with custom JavaScript controls in the same way that they do with desktop equivalents. This has the potential for providing a much more consistent user experience than was possible in the previous generation of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications.</p> + +<p><em>Example 3: Markup for the tabs widget with ARIA attributes added.</em></p> + +<pre class="brush: html"><code><!-- Now *these* are Tabs! --> +<!-- We've added role attributes to describe the tab list and each tab. --> +<ol role="tablist"></code> + <li id="ch1Tab" role="tab"> + <a href="#ch1Panel">Chapter 1</a> + </li> + <li id="ch2Tab" role="tab"> + <a href="#ch2Panel">Chapter 2</a> + </li> + <li id="quizTab" role="tab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. --> + <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> + <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> + <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div> +</div> +</pre> + +<p>ARIA is supported in the latest versions of all major browsers, including Firefox, Safari, Opera, Chrome, and Internet Explorer. Many assistive technologies, such as the open source NVDA and Orca screen readers, also support ARIA. Increasingly, JavaScript widget libraries such as jQuery UI, YUI, Google Closure, and Dojo Dijit include ARIA markup as well.</p> + +<h3 id="可见性变化">?可见性变化</h3> + +<p>Dynamic presentational changes include using CSS to change the appearance of content (such as a red border around invalid data, or changing the background color of a checked checkbox), as well as showing or hiding content.</p> + +<h4 id="状态变化">状态变化</h4> + +<p>ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to):</p> + +<ul> + <li><strong><code>aria-checked</code></strong>: indicates the state of a checkbox or radio button</li> + <li><strong><code>aria-disabled</code></strong>: indicates that an element is visible, but not editable or otherwise operable</li> + <li><strong><code>aria-grabbed</code></strong>: indicates the 'grabbed' state of an object in a drag-and-drop operation</li> +</ul> + +<p>(For a full list of ARIA states, consult the <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties" title="http://www.w3.org/TR/wai-aria/states_and_properties">ARIA list of states and properties</a>.)</p> + +<p>Developers should use ARIA states to indicate the state of UI widget elements and use CSS attribute selectors to alter the visual appearance based on the state changes (rather than using script to change a class name on the element).</p> + +<p>The Open Ajax Alliance website provides <a class="external" href="http://web.archive.org/web/20160303012540/http://oaa-accessibility.org/example/25/" title="http://www.oaa-accessibility.org/example/25/">an example of CSS attribute selectors based on ARIA states</a>. The example shows a WYSIWYG editor interface with a dynamic menu system. Items currently selected in a menu, such as the font face, are visually distinguished from other items. The relevant parts of the example are explained below.</p> + +<p>In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the <strong><code>aria-checked</code></strong> property is used to declare the selection state of the menu items.</p> + +<p><em>Example 1a. HTML for a selectable menu (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> + +<pre class="brush: html"><ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> + <li id="sans-serif" + class="menu-item" + role="menuitemradio" + tabindex="-1" + aria-controls="st1" + aria-checked="true">Sans-serif</li> + <li id="serif" + class="menu-item" + role="menuitemradio" + tabindex="-1" + aria-controls="st1" + aria-checked="false">Serif</li> + ... +</pre> + +<p>The CSS that is used to alter the visual appearance of the selected item is shown in Example 1b. Note that there is no custom classname used, only the status of the <strong><code>aria-checked</code></strong> attribute on line 1.</p> + +<p><em>Example 1b. Attribute-based selector for indicating state (from <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>).</em></p> + +<pre class="brush: css">li[aria-checked="true"] { + font-weight: bold; + background-image: url('images/dot.png'); + background-repeat: no-repeat; + background-position: 5px 10px; +} +</pre> + +<p>The JavaScript to update the <strong><code>aria-checked</code></strong> property has the form shown in Example 1c. Note that the script only updates the <strong><code>aria-checked</code></strong> attribute (lines 3 and 8); it does not need to also add or remove a custom classname.</p> + +<p><em>Example 1c. JavaScript to update the aria-checked attribute (based on <a class="external" href="http://www.oaa-accessibility.org/example/25/" rel="freelink">http://www.oaa-accessibility.org/example/25/</a>)</em>.</p> + +<pre class="brush: javascript">var processMenuChoice = function(item) { + // 'check' the selected item + item.setAttribute('aria-checked', 'true'); + // 'un-check' the other menu items + var sib = item.parentNode.firstChild; + for (; sib; sib = sib.nextSibling ) { + if ( sib.nodeType === 1 && sib !== item ) { + sib.setAttribute('aria-checked', 'false'); + } + } +}; +</pre> + +<h4 id="可见度变化">可见度变化</h4> + +<p>When content visibility is changed (i.e., an element is hidden or shown), developers should change the <strong><code>aria-hidden</code></strong> property value. The techniques described above should be used to declare CSS to visually hide an element using <code>display:none</code>.</p> + +<p>The Open Ajax Alliance website provides <a class="external" href="http://www.oaa-accessibility.org/example/39/" title="http://www.oaa-accessibility.org/example/39/">an example of a tooltip that uses <strong><code>aria-hidden</code></strong> to control the visibility of the tooltip</a>. The example shows a simple web form with tooltips containing instructions associated with the entry fields. The relevant parts of the example are explained below.</p> + +<p>In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the <strong><code>aria-hidden</code></strong> state to <code>true</code>.</p> + +<p><em>Example 2a. HTML for a tooltip (adapted from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="brush: html"><div class="text"> + <label id="tp1-label" for="first">First Name:</label> + <input type="text" id="first" name="first" size="20" + aria-labelledby="tp1-label" + aria-describedby="tp1" + aria-required="false" /> + <div id="tp1" class="tooltip" + role="tooltip" + aria-hidden="true">Your first name is optional</div> +</div> +</pre> + +<p>The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the <strong><code>aria-hidden</code></strong> attribute on line 1.</p> + +<p><em>Example 2b. Attribute-based selector for indicating state (from <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="brush: css">div.tooltip[aria-hidden="true"] { + display: none; + } +</pre> + +<p>The JavaScript to update the <strong><code>aria-hidden</code></strong> property has the form shown in Example 2c. Note that the script only updates the <strong><code>aria-hidden</code></strong> attribute (line 2); it does not need to also add or remove a custom classname.</p> + +<p><em>Example 2c. JavaScript to update the aria-checked attribute (based on <a class="external" href="http://www.oaa-accessibility.org/example/39/" rel="freelink">http://www.oaa-accessibility.org/example/39/</a>).</em></p> + +<pre class="brush: javascript">var showTip = function(el) { + el.setAttribute('aria-hidden', 'false'); +}</pre> + +<h3 id="角色变化">角色变化</h3> + +<div class="note">Under construction</div> + +<p>ARIA allows developers to declare a semantic role for an element that otherwise offers incorrect or no semantics. For example, when an unordered list is used to create a menu, the {{ HTMLElement("ul") }} should be given a <strong><code>role</code></strong> of <code>menubar</code> and each {{ HTMLElement("li") }} should be given a <strong><code>role</code></strong> of <code>menuitem</code>.</p> + +<p>The <strong><code>role</code></strong> of an element should not change. Instead, remove the original element and replace it with an element with the new <strong><code>role</code></strong>.</p> + +<p>For example, consider an "inline edit" widget: a component that allows users to edit a piece of text in place, without switching contexts. This component has a "view" mode, in which the text is not editable, but is activatable, and an "edit" mode, in which the text can be edited. A developer might be tempted to implement the "view" mode using a read-only text {{ HTMLElement("input") }} element and setting its ARIA <strong><code>role</code></strong> to <code>button</code>, then switching to "edit" mode by making the element writable and removing the <strong><code>role</code></strong> attribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics).</p> + +<p>Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a <strong><code>role</code></strong> of <code>button</code>, and the « edit » mode using a text {{ HTMLElement("input") }} element.</p> + +<h3 id="异步内容变化">?异步内容变化</h3> + +<div class="note">Under construction. See also <a href="/en/ARIA/Live_Regions" title="Live Regions">Live Regions</a></div> + +<h2 id="键盘导航">?键盘导航</h2> + +<p>Often times developers overlook support for the keyboard when they create custom widgets. To be accessible to a variety of users, all features of a web application or widget should also be controllable with the keyboard, without requiring a mouse. In practice, this usually involves following the conventions supported by similar widgets on the desktop, taking full advantage of the Tab, Enter, Spacebar, and arrow keys.</p> + +<p>Traditionally, keyboard navigation on the web has been limited to the Tab key. A user presses Tab to focus each link, button, or form on the page in a linear order, using Shift-Tab to navigate backwards. It's a one-dimensional form of navigation—forward and back, one element at a time. On fairly dense pages, a keyboard-only user often has to press the Tab key dozens of times before accessing the needed section. Implementing desktop-style keyboard conventions on the web has the potential to significantly speed up navigation for many users.</p> + +<p>Here's a summary of how keyboard navigation should work in an ARIA-enabled web application:</p> + +<ul> + <li>The Tab key should provide focus to the widget as a whole. For example, tabbing to a menu bar should put focus on the menu's first elem.</li> + <li>The arrow keys should allow for selection or navigation within the widget. For example, using the left and right arrow keys should move focus to the previous and next menu items.</li> + <li>When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control.</li> + <li>Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action.</li> + <li>If in doubt, mimic the standard desktop behavior of the control you are creating.</li> +</ul> + +<p>So, for the Tabs widget example above, the user should be able to navigate into and out of the widget's container (the <ol> in our markup) using the Tab and Shift-Tab keys. Once keyboard focus is inside the container, the arrow keys should allow the user to navigate between each tab (the <li> elements). From here, conventions vary from platform to platform. On Windows, the next tab should automatically be activated when the user presses the arrow keys. On Mac OS X, the user can press either Enter or the Spacebar to activate the next tab. An in-depth tutorial for creating <a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">Keyboard-navigable JavaScript widgets</a> describes how to implement this behavior with JavaScript.</p> + +<p>For more detail about desktop-style keyboard navigation conventions, a comprehensive <a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> is available. It provides an overview of how keyboard navigation should work for each type of widget supported by ARIA. The W3C also offers a helpful <a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> document that includes keyboard navigation and shortcut conventions for a variety of widgets. </p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en/ARIA" title="ARIA">ARIA</a></li> + <li><a href="/en/Accessibility/Web_applications_and_ARIA_FAQ" title="Web applications and ARIA FAQ">Web applications and ARIA FAQ</a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></li> + <li><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/Overview.html" title="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> + <li><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.html b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.html new file mode 100644 index 0000000000..5abe8b19f9 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.html @@ -0,0 +1,259 @@ +--- +title: ARIA live regions +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +<p>使用JavaScript，我们可以动态更改页面的某些部分，而无需重新加载整个页面——例如，可以动态更新搜索结果列表，或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的，但是对于残疾用户来说，它们可能并不明显。ARIA Live区域填补了这个空白，并提供了一种以编程方式显现动态内容更改的方法，这种方式可以由残疾辅助技术提供提示。</p> + +<div class="note"> +<p><strong>提示</strong>: 辅助技术将播报实时区域内容的动态变化。 必须首先显示活动区域（通常是空的），以便浏览器和辅助技术可以知道它。 然后宣布任何后续更改。</p> + +<p>在页面加载时的初始标记中简单地添加一个 <code>aria-live</code> 属性或者一个特殊的活动区域角色( <code>role</code> ) (例如 <code>role="alert"</code>) 将不会起作用。</p> + +<p>向文档中动态添加一个包含 <code>aria-live</code> 属性的元素或者特殊的角色( <code>role</code> ) 也不会导致辅助技术工具的任何播报（在那个时间点，浏览器/辅助技术工具还没有检测到活动区域） 所以你不能监控它的变化)。</p> + +<p>总是确保实时区域首先出现在文档中，然后再动态添加/更改任何内容。</p> + +<p>只要在更改发生之前添加属性，就可以在要宣布更改的元素上包含 <code>aria-live</code> 属性或专门的活动区域角色（例如<code>role =“ alert”</code>）——在原始标记中或动态地使用JavaScript。</p> +</div> + +<h2 id="简单的活动区域"><span class="mw-headline" id="Live_Region_State">简单的活动区域</span></h2> + +<p>在不重新加载页面的情况下更新的动态内容通常是区域或窗口小部件。 非交互式的简单内容更改应标记为实时区域。 以下是每个相关的ARIA活动区域属性的列表，并带有说明。</p> + +<ol> + <li><code><strong>aria-live</strong></code>: <code>aria-live=POLITENESS_SETTING</code> 被用来设置屏幕阅读器对待活动区域更新的优先级 - 可能的设置: <code>off</code>, <code>polite</code> or <code>assertive</code> 。默认设置是 <code>off</code> 。这个设置是到目前为止最重要的。</li> + <li> + <p class="comment"><code><strong>aria-controls</strong></code>: <code>aria-controls=[IDLIST]</code> 被用来将控制动作与它控制的区域相关联。区域就像<code>div</code> 里面的 <code>id</code> 被鉴别；多区域可以被一个带空格的控制动作关联，例如： <code>aria-controls="myRegionID1 myRegionsID2"</code> 。</p> + + <div class="warning"><strong>警告：</strong>尚不知道在当前的辅助技术工具中是否实现了实时区域的 ARIA 控制方面。 需要研究。</div> + </li> +</ol> + +<p>正常来说，只有 <code>aria-live="polite"</code> 被使用。任何对用户来说很重要但又不至于令人讨厌的更新的区域都应该被设置此属性。 每当用户空闲时，屏幕阅读器都会说出更改。</p> + +<p>对于不重要的区域或由于快速更新或其他原因而烦人的区域，请使用 <code>aria-live="off"</code> 将其静音。</p> + +<h3 id="让下拉框更新有用的屏幕信息">让下拉框更新有用的屏幕信息</h3> + +<p>一个专门提供有关行星信息的网站提供了一个下拉框。 从下拉列表中选择一个行星时，页面上的区域会更新有关所选行星的信息。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><fieldset> + <legend>Planet information</legend> + <label for="planetsSelect">Planet:</label> + <select id="planetsSelect" aria-controls="planetInfo"> + <option value="">Select a planet&hellip;</option> + <option value="mercury">Mercury</option> + <option value="venus">Venus</option> + <option value="earth">Earth</option> + <option value="mars">Mars</option> + </select> + <button id="renderPlanetInfoButton">Go</button> +</fieldset> + +<div role="region" id="planetInfo" aria-live="polite"> + <h2 id="planetTitle">No planet selected</h2> + <p id="planetDescription">Select a planet to view its description</p> +</div> + +<p><small>Information courtesy <a href="https://en.wikipedia.org/wiki/Solar_System#Inner_Solar_System">Wikipedia</a></small></p> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">const PLANETS_INFO = { + mercury: { + title: 'Mercury', + description: 'Mercury is the smallest and innermost planet in the Solar System. It is named after the Roman deity Mercury, the messenger to the gods.' + }, + + venus: { + title: "Venus", + description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty.' + }, + + earth: { + title: "Earth", + description: 'Earth is the third planet from the Sun and the only object in the Universe known to harbor life.' + }, + + mars: { + title: "Mars", + description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System after Mercury. In English, Mars carries a name of the Roman god of war, and is often referred to as the "Red Planet".' + } +}; + +function renderPlanetInfo(planet) { + const planetTitle = document.querySelector('#planetTitle'); + const planetDescription = document.querySelector('#planetDescription'); + + if (planet in PLANETS_INFO) { + planetTitle.textContent = PLANETS_INFO[planet].title; + planetDescription.textContent = PLANETS_INFO[planet].description; + } else { + planetTitle.textContent = 'No planet selected'; + planetDescription.textContent = 'Select a planet to view its description'; + } +} + +const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton'); + +renderPlanetInfoButton.addEventListener('click', event => { + const planetsSelect = document.querySelector('#planetsSelect'); + const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value; + + renderPlanetInfo(selectedPlanet); +}); +</pre> + +<p>{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}</p> + +<p>当用户选择一个新的行星时，活动区域的信息会被播报。因为这个活动区域有 <code>aria-live="polite"</code> 属性，屏幕阅读器将会等待用户暂停后再播报更新。这样的话，在列表中向下滑动并选择其他星球将不会在实时区域中播报更新。 仅会针对最终选择的星球播报实时区域的更新。</p> + +<p>这是Mac上VoiceOver的屏幕截图，播报对实时区域的更新（通过字幕）：<img alt="A screenshot of VoiceOver on Mac announcing the update to a live region. Subtitles are shown in the picture." src="https://mdn.mozillademos.org/files/15815/Web_Accessibility_ARIA_ARIA_Live_Regions.png" style="height: 573px; width: 800px;"></p> + +<h2 id="更好的专业活动区域角色">更好的专业活动区域角色</h2> + +<p>在以下众所周知的预定义情况下，最好使用提供的特定“活动区域角色”：</p> + +<table style="width: 100%;"> + <thead> + <tr> + <th scope="col">角色</th> + <th scope="col">描述</th> + <th scope="col">兼容性提示</th> + </tr> + </thead> + <tbody> + <tr> + <td>日志</td> + <td>对话、错误、游戏或者其他类型的日志</td> + <td>为最大化兼容性，当你使用这个角色时，请加入额外的<code>aria-live="polite"</code> 参数。</td> + </tr> + <tr> + <td>状态</td> + <td>一个状态栏或者屏幕上提供持续更新某种状态的区域。屏幕阅读器用户有一个特殊的命令用来读取当前的状态。</td> + <td>为最大化兼容性，当你使用这个角色时，请加入额外的<code>aria-live="polite"</code> 参数。</td> + </tr> + <tr> + <td>警告</td> + <td>在屏幕上闪烁的错误或警告信息。警报对于向用户发出客户端验证通知特别重要。 （待定：带有ARIA信息的ARIA表单教程链接）</td> + <td>为最大化兼容性，当你使用这个角色时，请加入额外的<code>aria-live="assertive"</code> 参数。但是，同时添加 <code>aria-live</code> 和 <code>role="alert"</code> 会导致在iOS平台上出现VoiceOver的双重播报问题。</td> + </tr> + <tr> + <td>进度条</td> + <td>小部件和活动区域之间的混合体。 将此参数与 <code>aria-valuemin</code> ， <code>aria-valuenow</code> 和<code>aria-valuemax</code> 结合使用。 （<em>待定</em>：请在此处添加更多信息）。</td> + <td></td> + </tr> + <tr> + <td>选框</td> + <td>用于滚动文本，例如股票行情自动收录器。</td> + <td></td> + </tr> + <tr> + <td>计时器</td> + <td>或任何类型的计时器或时钟，例如倒数计时器或秒表读数。</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="高级活动区域">高级活动区域</h2> + +<p>（<em>待定</em>：有关操作系统 / 浏览器 / 辅助技术工具组合对单个属性的支持的更详细的信息）</p> + +<p>JAWS 10.0版中已添加对实时区域的常规支持。 Windows Eyes从8.0版开始支持“在Microsoft Internet Explorer和Mozilla Firefox的浏览模式之外使用”的实时区域。 NVDA早在2008年就为Mozilla Firefox添加了对实时区域的一些基本支持，并在2010年和2014年进行了改进。2015年，还为Internet Explorer（MSHTML）添加了基本支持。</p> + +<p>Paciello Group 有一些<a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">与活动区域支持状态有关的信息 </a>(2014) ，Paul J. Adam 特别研究了<a href="http://pauljadam.com/demos/aria-atomic-relevant.html"> 对于 <code>Aria-Atomic </code>与 <code>Aria-Relevant</code> 的支持</a>。 </p> + +<ol> + <li><code><strong>aria-atomic</strong></code><strong> </strong>: <code>aria-atomic=BOOLEAN</code> 被用来设置屏幕阅读器是否应该总是将活动区域整个播报，即使区域中只有一部分内容改变。可能的值为 <code>false</code> 或者 <code>true</code> 。默认值为 <code>false</code> 。</li> + <li><code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute"><strong>aria-relevant</strong></a></code> : <code>aria-relevant=[LIST_OF_CHANGES]</code> 被用来设置哪些类型的改变与活动区域有关。可能的值由以下的一个或者更多组成: <code>additions</code>, <code>removals</code>, <code>text</code>, <code>all</code> 。 默认值是 <code>additions text</code> 。</li> + <li><code><strong>aria-labelledby</strong></code> : <code>aria-labelledby=[IDLIST]</code> 被用来将一个区域与其标签关联起来，与 <font face="consolas, Liberation Mono, courier, monospace"><span>aria-control</span></font> 类似，但将标签与区域关联。标签标识符间用空格隔开。</li> + <li><code><strong>aria-describedby</strong></code> : <code>aria-describedby=[IDLIST]</code> 被用来将一个区域与其描述关联起来，与 <font face="consolas, Liberation Mono, courier, monospace"><span>aria-control</span></font> 类似，但将标签与描述关联。描述标识符间用空格隔开。</li> +</ol> + +<h3 id="高级用例_时钟"><span class="mw-headline">高级用例: 时钟</span></h3> + +<p>为了举例说明 <code>aria-atomic</code> ，请考虑一个带有简单时钟的站点，其中显示了小时和分钟。 时钟每分钟更新一次，而新的剩余时间仅会覆盖当前内容。</p> + +<pre class="brush: html notranslate"><div id="clock" role="timer" aria-live="polite"></div> +</pre> + +<pre class="brush: js notranslate">/* basic JavaScript to update the clock */ + +setInterval(function() { + var now = new Date(); + document.getElementById('clock').innerHTML = "Time: " + now.getHours() + ":" + ("0"+now.getMinutes()).substr(-2); +}, 60000); +</pre> + +<p>该函数第一次执行时，将播报所添加字符串的全部。 在随后的调用中，将仅播报内容与先前内容相比已更改的部分。 例如，当时钟从“ 17:33”更改为“ 17:34”时，辅助技术工具将仅播报“ 4”，这对用户不是很有用。</p> + +<p>解决此问题的一种方法是，首先清除活动区域的内容，然后注入新内容。 但是，有时这可能不可靠，因为这取决于这两个更新的确切时间。</p> + +<p><code>aria-atomic="true"</code> 确保每次更新实时区域时，全部内容都会被完整播报(例如 "时间: 17:34").</p> + +<pre class="brush: html notranslate"><div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> +</pre> + +<div class="note"> +<p><strong>注意：</strong> 正如我们观察到的那样，重新设置/更新 innerHTML 会导致整个文本被重新播报，无论你是否设置 <code>aria-atomic="true"</code> ，所以以上的时钟示例并不能像预期那样地工作。</p> +</div> + +<p class="syntaxbox">一个简单的年份控件的工作示例，可以帮助您更好地理解：</p> + +<pre class="brush: html notranslate"><div id="date-input"> + <label>Year: + <input type="text" id="year" value="1990" onblur="change(event)"/> + </label> +</div> + +<div id="date-output" aria-live="polite"> + The set year is: + <span id="year-output">1990</span> +</div></pre> + +<p class="syntaxbox"></p> + +<pre class="brush: js notranslate">function change(event) { + var yearOut = document.getElementById("year-output"); + switch (event.target.id) { + case "year": + yearOut.innerHTML = event.target.value; + break; + default: + return; + } +};</pre> + +<p class="syntaxbox"></p> + +<p>如果没有 <code>aria-atomic="true"</code> ，屏幕阅读器只会播报"年"的数值的改变。</p> + +<p>如果有 <code>aria-atomic-="true"</code> ，屏幕阅读器会播报"设置的年为: <em>改变的值</em>"。</p> + +<h3 id="高级用例_名册"><span class="mw-headline">高级用例: 名册</span></h3> + +<p>一个聊天站点想要显示当前登录用户的列表。列表将动态反映用户的登录和注销状态的用户（无需重新加载页面）。</p> + +<pre class="brush: html notranslate"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- use JavaScript to add remove users here--> +</ul> +</pre> + +<p>ARIA 活动属性的细分：</p> + +<ul> + <li><code>aria-live="polite"</code> 指示屏幕阅读器应该等到用户空闲后再播报更新。这是最常用的值，因为用 <code>“assertive”</code> 值会打扰用户，打断他们的操作流程。</li> + <li><code>aria-atomic</code> 没有设置 (默认为 <code>false</code> ) ，这样就只能说出添加或删除的用户，而不是整个名单。</li> + <li><code>aria-relevant="additions removals"</code> 确保在在线名册中添加用户与移除用户的时候都会被播报。</li> +</ul> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA 角色</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..2f704dff7f --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,136 @@ +--- +title: ARIA techniques +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<h3 id="Roles">Roles</h3> + +<h4 id="Widget_roles">Widget roles</h4> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role" title="Using the alert role">Alert</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alertdialog role">Alertdialog</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role" title="en/ARIA/ARIA_Techniques/Using_the_button_role">Button</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_checkbox_role" title="en/ARIA/ARIA_Techniques/Using_the_checkbox_role">Checkbox</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role" title="Using the dialog role">Dialog</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="en/ARIA/ARIA_Techniques/Using_the_link_role">Link</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="en/ARIA/ARIA_Techniques/Using_the_log_role">Log</a></li> + <li>Marquee</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">Progressbar</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radio</a></li> + <li>Scrollbar</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">Slider</a></li> + <li>Spinbutton</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> + <li>Timer</li> + <li>Tooltip</li> +</ul> + +<h4 id="Composite_roles">Composite roles</h4> + +<p>The techniques below describes each composite role as well as their required and optional child roles.</p> + +<ul> + <li>Grid (including row, gridcell, rowheader, columnheader roles)</li> + <li>Menubar/ Menu (including menuitem, menuitemcheckbox, menuitemradio)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">Listbox</a> (包含 option role)</li> + <li>Tablist (包含 tab 和 tabpanel roles)</li> + <li>Tree (including group and treeitem roles)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">Radiogroup (see radio role)</a></li> + <li>Treegrid</li> +</ul> + +<h4 id="Document_structure_roles">Document structure roles</h4> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">Article</a></li> + <li>Definition</li> + <li>Directory</li> + <li>Document</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">Group</a></li> + <li>Heading</li> + <li>Img</li> + <li>List, listitem</li> + <li>Math</li> + <li>Note</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">Presentation</a></li> + <li>Region</li> + <li>Separator</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">Toolbar</a></li> +</ul> + +<h4 id="Landmark_roles">Landmark roles</h4> + +<ul> + <li>Application</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">Banner</a></li> + <li>Complementary</li> + <li>Contentinfo</li> + <li>Form</li> + <li>Main</li> + <li>Navigation</li> + <li>Search</li> +</ul> + +<h3 id="States_and_properties">States and properties</h3> + +<h4 id="Widget_attributes">Widget attributes</h4> + +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-disabled</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> +</ul> + +<h4 id="Live_region_attributes">Live region attributes</h4> + +<ul> + <li>aria-live</li> + <li>aria-relevant</li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> + +<h4 id="Drag_drop_attributes">Drag & drop attributes</h4> + +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> + +<h4 id="Relationship_attributes">Relationship attributes</h4> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> + <li>aria-controls</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> + <li>aria-flowto</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-setsize</li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..6f207e12d4 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,59 @@ +--- +title: 使用 aria-label 属性 +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - 参考 + - 可访问性 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p>aria-label属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加label（如果被描述元素存在真实的描述元素，可使用 <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> 属性作为来绑定描述元素和被描述元素来代替）。</p> + +<p>aria-label属性可以用在任何典型的HTML元素中，并不需要配合特定的ARIA role才能使用。</p> + +<h3 class="editable" id="Value"><span>Value</span></h3> + +<p>string</p> + +<h3 class="editable" id="对于用户代理和辅助技术的可能影响">对于用户代理和辅助技术的可能影响</h3> + +<div class="editIcon" style=""> +<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> +</div> + +<div class="note"><strong>Note:</strong> 由于辅助技术处理这一技术的差异导致选项信息可能不同.以上所提供的信息只是其中可能的一种，而非一般情况。.</div> + +<h2 id="示例">示例</h2> + +<div id="section_5"> +<h4 id="示例1：多标签（Multiple_Labels）">示例1：多标签（Multiple Labels）</h4> + +<p>在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道X是什么意思，所以需要aria-label标签来为辅助设备提供相应的标识来告诉它这个button是close的作用。</p> +</div> + +<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"Close"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +</pre> + +<h3 id="说明：">说明： </h3> + +<p>最常见的对于标签的可访问性API就是可访问的name属性。</p> + +<h3 id="ARIA_roles的使用">ARIA roles的使用</h3> + +<p>基本标记中的全部元素。</p> + +<h3 id="ARIA_相关技术">ARIA 相关技术 </h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> +</ul> + +<h3 id="兼容性">兼容性</h3> + +<p class="comment">有待讨论: 为通常的UA和AT产品组合提供支持信息。</p> + +<h3 id="额外资源">额外资源</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label">WAI-ARIA specification for aria-label</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..80be18aa54 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,150 @@ +--- +title: Using the aria-labelledby attribute +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +<h3 id="描述"><strong>描述</strong></h3> + +<p><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>属性用来表明某些元素的id是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系。使用诸如屏幕阅读器等辅助技术的用户通常使用tabbing在页面的不同区域间进行导航。如果一个输入元素、控件或控件组没有被分配一个label标签，那么屏幕阅读器就无法对其进行阅读。</p> + +<p><code>aria-labelledby属性与</code><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a>属性非常相似: 用一个标签描述某一对象的本质，可能会提供一些用户需要了解的额外信息。</p> + +<p><code>aria-labelledby属性并不仅仅用于表单元素，也可以用来分配静态文本给控件、元素组、面板组以及包含标题和定义等内容的区域等。下方的示例将会展示如何针对这些情况运用这一属性的更多信息。</code></p> + +<p><code>aria-labelledby属性可以与HTML元素label联合使用，用于提高对于不支持ARIA技术的用户代理的兼容性。</code></p> + +<p>这一属性可以用于任何典型的HTML表单元素，不仅限于已分配ARIA role的元素。</p> + +<h3 id="值Value">值Value</h3> + +<p>一个以空格进行分割的元素ID列表。</p> + +<h3 id="对于用户代理和辅助技术的可能影响">对于用户代理和辅助技术的可能影响</h3> + +<p>当<code>aria-labelledby和</code><code><a href="/en/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a>都被使用时</code>, 用户代理在生成可访问的名称属性时将为<code>aria-labelledby分配更高的优先级。</code></p> + +<p><strong>注意:</strong> 由于不同的辅助技术对于这一技术的处理可能不同，以上提供的信息尽是诸多可能的一种，而非一般情况。</p> + +<h3 id="示例">示例</h3> + +<h4 id="示例1_多标签_Mutiple_Labels">示例1: 多标签 Mutiple Labels</h4> + +<p>在下面的示例中，每个输入域都被它自身的独立标签以及其所在组的标签进行了标识：</p> + +<pre><div id="billing">Billing Address</div> + +<div> + <div id="name">Name</div> + <input type="text" aria-labelledby="name billing"/> +</div> +<div> + <div id="address">Address</div> + <input type="text" aria-labelledby="address billing"/> +</div> +</pre> + +<h4 id="示例2_联结的标题和区域_Associating_Headings_With_Regions">示例2: 联结的标题和区域 Associating Headings With Regions</h4> + +<p>在下面的示例中，标题元素被与它们作为标题的内容联结在一起。注意，所参考的区域是包含标题元素的那个区域。</p> + +<pre><div role="main" aria-labelledby="foo"> + <h1 id="foo">Wild fires spread across the San Diego Hills</h1> + Strong winds expand fires ignited by high temperatures ... +</div> +</pre> + +<h4 id="示例3_单选组_Radio_Groups">示例3: 单选组 Radio Groups</h4> + +<p>在下面的示例中，单选组<a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radiogroup_role" title="Using the alert role">radiogroup</a>的容器通过一个aria-labeledby属性与他的的标签相联结：</p> + +<pre><div id="radio_label">My radio label</div> +<ul role="radiogroup" aria-labelledby="radio_label"> + <li role="radio">Item #1</li> + <li role="radio">Item #2</li> + <li role="radio">Item #3</li> +</ul> +</pre> + +<h4 id="示例4_对话框标签_Dialog_Label">示例4: 对话框标签 Dialog Label</h4> + +<p>在下面的示例中，标记对话框的标题元素通过aria-labeledby属性被引用</p> + +<pre><div role="dialog" aria-labelledby="dialogheader"> + <h2 id="dialogheader">Choose a File</h2> + ... Dialog contents +</div> +</pre> + +<h4 id="示例5_内联定义_Inline_Definition">示例5: 内联定义 Inline Definition</h4> + +<p>在下面的示例中，某一事物的被一个叙述性的自然流所描述的定义与这一事物本身通过<strong>aria-labeledby</strong>属性相联结：</p> + +<pre><p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo"> +an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span> +</p> +</pre> + +<h4 id="示例6_定义列表_Definition_Lists">示例6: 定义列表 Definition Lists</h4> + +<p>在下面的示例中，正式的定义列表中的定义与他们所定义的项目通过aria-labeledby属性相联结：</p> + +<pre><dl> + <dt id="anathema">anthema</dt> + <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority + and accompanied by excommunication</dd> + <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd> + + <dt id="homily">homily</dt> + <dd role="definition" aria-labelledby="homily">a usually short sermon</dd> + <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd> + +</dl> +</pre> + +<h4 id="示例7_菜单">示例7: 菜单</h4> + +<p>在下面的示例中，一个<a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-haspopup_attribute" title="Using the aria-required attribute">popup menu</a>通过aria-labeledby属性与其标签相联结：</p> + +<pre><div role="menubar"> + <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div> + <div role="menu" aria-labelledby="fileMenu"> + <div role="menuitem">Open</div> + <div role="menuitem">Save</div> + <div role="menuitem">Save as ...</div> + ... + </div> + ... +</div> +</pre> + +<h4 id="操作实例">操作实例:</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Button example</a> uses <code>aria-labelledby</code></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Combobox example</a> uses <code>aria-labelledby</code></li> +</ul> + +<h3 id="注意">注意 </h3> + +<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property</p> + +<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3> + +<p>all elements of the base markup</p> + +<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">Using the aria-label attribute</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Using the aria-describedby attribute</a></li> +</ul> + +<h3 id="Compatibility">Compatibility</h3> + +<p>TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Additional_resources">Additional resources</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">WAI-ARIA specification for aria-labelledby</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html new file mode 100644 index 0000000000..e0e35c449a --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html @@ -0,0 +1,122 @@ +--- +title: Using the button role +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role +tags: + - ARIA + - 可访问性 + - 无障碍 +translation_of: Web/Accessibility/ARIA/Roles/button_role +--- +<p><strong><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></strong> 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，<code>role="button"</code> 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 <code>aria-pressed</code> 属性组合使用，以创建切换按钮。</p> + +<div class="note"><strong>注意: </strong>在可能的情况下，建议使用原生HTML按钮 (<code><button></code>, <code><input type="button" /></code>, <code><input type="submit" />, <input type="reset" /> </code>and <code><input type="image" /></code>) 而不是按钮角色，因为原生HTML按钮得到了较老用户代理和辅助技术的广泛支持。原生HTML按钮也支持键盘和焦点需求，不需要额外的定制。</div> + +<h2 id="键盘_and_聚焦">键盘 and 聚焦</h2> + +<p>按钮是交互式控件，因此其本身是可聚焦的。如果<code>button</code> 角色被添加到一个自身不可聚焦的元素(such as <code><span></code>, <code><div></code> or <code><p></code>) 那么必须使用<code>tabindex</code> 属性来使按钮可聚焦。</p> + +<p>按钮可以由鼠标用户和键盘用户操作。 对于原生HTML <code><button></code> 元素 ，按钮的 <code>onclick</code> 事件会在鼠标单击和按下键盘的 <kbd>Space</kbd> or <kbd>Enter</kbd> 时被触发， 同时这个按钮处于聚焦状态。 但是如果使用其他标签来创建“自定义按钮”，那么<code>onclick</code>事件只会在点击鼠标光标时触发，即使使用<code>role="button"</code> 。因此，开发人员必须向元素添加一个单独的关键事件处理程序，以便在按下 <kbd>Space</kbd> or <kbd>Enter</kbd> 时触发按钮。</p> + +<p class="warning"><strong>Warning:</strong> 把给一个链接标记为按钮角色的链接时要谨慎。按钮将使用 <kbd>Space</kbd> or <kbd>Enter</kbd> 键触发，而链接被期望使用 <kbd>Enter</kbd> 键触发。 换句话说，当链接被用来作为按钮的时候，仅仅添加<code>role="button"</code>是不够的。还需要添加一个 key 事件处理程序来侦听 <kbd>Space</kbd> 键，以便与原生按钮保持一致。</p> + +<h2 id="可切换的按钮">可切换的按钮</h2> + +<p>使用<code>role="button"</code>的一个优点是它允许创建切换按钮。一个切换按钮可以有两个状态:pressed，not pressed。除了 <code>button</code>角色之外，按钮是否为切换按钮，也可以用<code>aria-pressed</code>的属性来表示。</p> + +<ul> + <li>如果没有 <code>aria-pressed</code>表明这不是一个切换按钮。</li> + <li>如果 <code>aria-pressed="false"</code> 表示这个按钮当前是 not pressed 的。</li> + <li>如果 <code><code>aria-pressed="true"</code></code> 表示这个按钮当前是 pressed 的。</li> + <li>如果 <code>aria-pressed="mixed"</code> 则认为按钮部分是 partially pressed 的。</li> +</ul> + +<h2 id="Labeling_buttons">Labeling buttons</h2> + +<p>按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> 或 <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> 属性提供可访问的名称。</p> + +<h2 id="对用户代理和辅助技术的可能影响">对用户代理和辅助技术的可能影响</h2> + +<p>当使用 <code>button</code> 角色时，用户代理应该将该元素公开为操作系统的易访问性API中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说："点击"+按钮的可访问的name 就能激活这个按钮。</p> + +<div class="note"><strong>Note:</strong> 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。</div> + +<h2 id="Examples">Examples</h2> + +<h3 id="ARIA_Basic_Button">ARIA Basic Button</h3> + +<p>在下面的代码片段中，一个span元素已经被赋予了按钮角色。由于使用的是 <code><span></code> 元素，因此需要提供 <code>tabindex</code> 属性使按钮的可聚焦并成为tab顺序流中的一部分。注意，这段代码提供了CSS样式，以使 <code><span></code>元素看起来像一个按钮， <code>handleBtnClick</code> 和<code>handleBtnKeyPress</code> 是事件处理程序，当鼠标单击、 <kbd>Space</kbd> or <kbd>Enter</kbd> 被按下时，执行该按钮的操作。</p> + +<pre class="brush: html"><span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span> +</pre> + +<h3 id="ARIA_Toggle_Button">ARIA Toggle Button</h3> + +<p>在这个片段中，使用 <code>button</code> 角色和 <code>aria-pressed</code> 属性，来将 <code><span></code> 元素转换为一个切换按钮，当按钮被激活时， <code>aria-pressed</code> 的值在true和false之间切换。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><button type="button" aria-pressed="false" onclick="handleBtnClick(event)"> + Native button toggle +</button> + +<span role="button" tabindex="0" + aria-pressed="false" onclick="handleBtnClick(event)" + onKeyPress="handleBtnKeyPress(event)"> + Span button toggle +</span></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">button, +[role="button"] { + padding: 3px; + border: 1px solid #CCC; +} + +button[aria-pressed="true"], +[role="button"][aria-pressed="true"] { + border: 2px solid #000; +} +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">function handleBtnClick(event) { + toggleButton(event.target); +} + +function handleBtnKeyPress(event) { + // Check to see if space or enter were pressed + if (event.key === " " || event.key === "Enter") { + // Prevent the default action to stop scrolling when space is pressed + event.preventDefault(); + toggleButton(event.target); + } +} + +function toggleButton(element) { + // Check to see if the button is pressed + var pressed = (element.getAttribute("aria-pressed") === "true"); + // Change aria-pressed to the opposite state + element.setAttribute("aria-pressed", !pressed); +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('ARIA_Toggle_Button')}}</p> + +<h2 id="Notes">Notes </h2> + +<h3 id="ARIA_attributes_used">ARIA attributes used</h3> + +<ul> + <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li> + <li><code><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-pressed">aria-pressed</a></code></li> +</ul> + +<h3 id="Additional_resources">Additional resources</h3> + +<ul> + <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Strong native semantics in HTML5</a></li> + <li><a href="https://www.w3.org/TR/aria-in-html/">Notes on Using ARIA in HTML</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html new file mode 100644 index 0000000000..8b7f706afa --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/使用aria-hidden属性/index.html @@ -0,0 +1,94 @@ +--- +title: 使用aria-hidden属性 +slug: Web/Accessibility/ARIA/ARIA_Techniques/使用aria-hidden属性 +tags: + - HTML + - Rôle + - 代码脚本 + - 可访问性 + - 可访问的富网络应用 + - 客户端 + - 警告 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute +--- +<p>{{draft}}</p> + +<p>本文用来说明如何使用aria-hidden属性。aria-hidden属性可以用来控制一系列可访问API中的非交互内容的显示或隐藏。</p> + +<h2 id="描述">描述</h2> + +<div class="summary"> +<p>把 <code>aria-hidden="true"</code> 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：</p> + +<ul> + <li>纯装饰性的内容，如图标、图片</li> + <li>重复的内容，如重复的文本</li> + <li>屏幕外或被折叠的内容，如菜单</li> +</ul> + +<p>根据<a href="https://www.w3.org/TR/using-aria/#fourth">可访问性的第四条规则</a>，<code>aria-hidden="true"</code> 不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。</p> + +<p>如果父元素带有 <code>aria-hidden="true"</code> ，那么即使使用 <code>aria-hidden="false"</code> 也无法将该元素显示出来。</p> +</div> + +<div class="blockIndicator warning"> +<p>WAI-ARIA Authoring Practices 1.1 提示 <code>aria-hidden="false"</code> 在现阶段 <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">各个浏览器中表现不同</a>.</p> +</div> + +<h3 id="比较_aria-hiddentrue，_rolepresentation_和_rolenone">比较 <code>aria-hidden="true"</code>， <code>role="presentation"<font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="background-color: #333333;"> 和 </span></font></code><code>role="none"</code></h3> + +<p>表面上，<code>aria-hidden="true"</code>，<code>role="presentation"</code>，和<code>role="none"</code> 很相似，因为这三者都有以下特性:</p> + +<ul> + <li>根据辅助即使隐藏页面内容</li> + <li>无法在可聚焦元素上使用</li> + <li>无法在可互动元素的父级元素上使用</li> +</ul> + +<p dir="ltr">尽管有上面这些相同点，但是各个属性的意图是不同的。</p> + +<ul dir="ltr"> + <li><code>aria-hidden="true"</code> 会把整个元素从可访问性API中移除</li> + <li><code>role="presentation"</code> 和<code>role="none"</code> 会将元素从语义上移除，仍然会将元素暴露给辅助技术。</li> +</ul> + +<p dir="ltr"></p> + +<h3 id="可选值">可选值</h3> + +<dl> + <dt><code>false</code></dt> + <dd>（默认）元素会暴露给可访问性API。</dd> + <dt><code>true</code></dt> + <dd>元素不会暴露给可访问性API。</dd> + <dt><code>undefined</code></dt> + <dd>（默认）客户端决定元素是否暴露给可访问性API。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"> <i class="icon" <code>aria-hidden="true" /></code> + </pre> + +<h2 id="无障碍问题">无障碍问题</h2> + +<h2 id="最佳实践">最佳实践</h2> + +<p> <code>aria-hidden="true"</code> 在以下场景不应该被使用:</p> + +<ul> + <li>HTML的<code>hidden</code>属性被设置了</li> + <li>祖先元素被<code>display: none</code>属性设置成不显示状态</li> + <li>祖先元素被<code>visibility: hidden</code>属性设置成不显示状态</li> +</ul> + +<p dir="ltr">在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加<code>aria-hidden="true"</code>属性。</p> + +<h2 dir="ltr" id="技术规格">技术规格</h2> + +<h2 dir="ltr" id="另见">另见</h2> + +<ul dir="ltr"> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">使用展示角色</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_none_role">role="none"</a></li> +</ul> diff --git a/files/zh-cn/web/accessibility/aria/forms/alerts/index.html b/files/zh-cn/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..485633647c --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,143 @@ +--- +title: Alerts +slug: Web/Accessibility/ARIA/forms/alerts +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="问题">问题</h2> + +<p>您有一个表单（例如联系表单），您希望将一些可访问的错误检查放入其中。 常见问题的示例包括无效的电子邮件地址，或至少不包含名字或姓氏的名称字段。</p> + +<h2 id="表单">表单</h2> + +<p>首先，请阅读有关<a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> technique</a>所需的技术（如果您尚未这样做的话），因为该技术会以此为基础进行扩展。</p> + +<p>这是一个示例表单：</p> + +<pre class="brush: html notranslate"> <form method="post" action="post.php"> + <fieldset> + <legend>Please enter your contact details</legend> + <label for="name">Your name (required):</label> + <input name="name" id="name" aria-required="true"/> + <br /> + <label for="email">E-Mail address (required):</label> + <input name="email" id="email" aria-required="true"/> + <br /> + <label for="website">Website (optional):</label> + <input name="website" id="website"/> + </fieldset> + <label for="message">Please enter your message (required):</label> + <br /> + <textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> + <br /> + <input type="submit" name="submit" value="Send message"/> + <input type="reset" name="reset" value="Reset form"/> + </form> +</pre> + +<h2 id="检查有效性并通知用户"><span>检查有效性并通知用户</span></h2> + +<p>表单有效性检验由这几个步骤组成：</p> + +<ol> + <li>检查电子邮件地址或输入的名称是否有效。 每个字段都有一组必须通过验证的标准。 为了简化此示例，我们将检查电子邮件地址是否包含“ @”符号，以及名称条目是否包含至少1个字符。</li> + <li>如果不满足上述条件，则该字段的<code>aria-invalid</code>属性将被赋予“ <code>true</code>”值。</li> + <li>如果不符合条件，用户将被通过警报来通知。 我们将使用简单的WAI-ARIA小部件来进行通知，而不是使用JavaScript的“<code>alert</code>”功能。 这会通知用户错误，但允许他们继续修改表单而不会失去焦点（由JavaScript默认的“<code>alert</code>”功能中的“ <code>onblur</code>”处理函数引起）。</li> +</ol> + +<p>下面是一个能够被插入在结束“ <code>head</code>”标签上方的示例JavaScript代码 </p> + +<pre class="brush: js notranslate"> <script type="application/javascript"> + function removeOldAlert() + { + var oldAlert = document.getElementById("alert"); + if (oldAlert){ + document.body.removeChild(oldAlert); + } + } + + function addAlert(aMsg) + { + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); + } + + function checkValidity(aID, aSearchTerm, aMsg) + { + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } + } + </script> +</pre> + +<h2 id="checkValidity_函数"><span class="mw-headline" id="The_checkValidity_function"><code>checkValidity</code> 函数</span></h2> + +<p>JavaScript中用于表单验证的主要方法是<code>checkValidity</code>函数。 此方法采用三个参数：要验证的<code>输入</code>的ID，要确保有效性的搜索项，以及要插入警报中的错误消息。</p> + +<p>要查看其是否有效，该函数将检查<code>输入</code>的<code>indexOf</code>值是否大于<code>-1</code>。 如果在值内找不到搜索词的索引，则返回<code>-1</code>或更小的值。</p> + +<p>如果无效，这个函数会执行这两个事情：</p> + +<ol> + <li>它会把这个字段的<code>aria-invalid</code>属性设置为“<code>true</code>”，指示用户那里有无效的内容。</li> + <li>它会调用<code>addAlert</code>函数来使用给定的错误信息添加警告。</li> +</ol> + +<p>如果搜索词被找到，<code>aria-invalid</code>值会被重置为“<code>false</code>”。此外，所有剩余警告都将被删除。</p> + +<h2 id="addAlert_函数"><span class="mw-headline" id="The_addAlert_function"><code>addAlert</code> 函数</span></h2> + +<p>此功能首先删除所有旧警报。 该函数很简单：它查找ID为“<code>alert</code>”的元素，如果找到，则将其从<a href="https://wiki.developer.mozilla.org/zh_CN/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">文档对象模型</a>中删除。</p> + +<p><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">接下来，这个函数创建一个</span></font><code>div</code>元素来保存警告文本。 它得到了一个 “<code>alert</code>”的ID.，并且它具有“<code>alert</code>”角色集。 这实际上是受ARIA启发的，即使它在属性名称中没有标明“aria”。 这是因为该角色基于<a href="http://www.w3.org/TR/xhtml-role/">XHTML角色属性模块</a>，为简单起见，该模块简单地移植到HTML。</p> + +<p>这些文字被加入这个<code>div</code>元素，然后这个<code>div</code>元素被加入文档。</p> + +<p>发生这种情况时，当此<code>div</code>出现时，Firefox将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于Firefox中的提示栏，提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮，只是告诉我们出了什么问题。</p> + +<h2 id="修改“onblur”_事件"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">修改“<code>onblur</code>” 事件</span></h2> + +<p>现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入：</p> + +<pre class="brush: html notranslate"> <input name="name" id="name" aria-required="true" + onblur="checkValidity('name', ' ', 'Invalid name entered!');"/> + <br /> + <input name="email" id="email" aria-required="true" + onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> +</pre> + +<p><strong>测试示例</strong></p> + +<p>如果你在使用Firefox 3和一个当前支持的屏幕阅读器，试试看下面的操作：</p> + +<ol> + <li>在姓名输入框中，只输入你的名。按下Tab键时，您会听到警告，提示您输入了无效的姓名。 然后，您可以向后移Tab键并更正错误。</li> + <li>输入不带“ @”符号的电子邮件地址。 跳出此字段时，您应该听到一条警告，提示您未输入有效的电子邮件地址。</li> +</ol> + +<p>在两种情况下，当将焦点返回到相关字段时，您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能，但是JAWS 8不支持，所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。</p> + +<h2 id="您可能遇到的一些问题"><span class="mw-headline" id="A_few_questions_that_you_might_have">您可能遇到的一些问题</span></h2> + +<dl> + <dt> + <p>Q. 为什么在某些输入中同时在标签文本和“<code>aria-required</code>”属性中都添加了“<code>(required)</code>”？</p> + </dt> + <dd>A. 如果这是一个实例中的表格，并且尚不支持ARIA的浏览器正在访问该网站，我们仍然希望表明这是必填字段。</dd> + <dt>Q. 为什么不将焦点自动设置回无效字段？</dt> + <dd>A. 因为Windows API规范（可能还有其他规范）不允许这样做。 同样，让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。</dd> +</dl> + +<div class="warning">TBD:<span>让我们重新考虑一下-就个人而言，我认为如果不引起键盘陷阱，设置焦点可能会很好。</span></div> diff --git a/files/zh-cn/web/accessibility/aria/forms/index.html b/files/zh-cn/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..a7deb829f0 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/forms/index.html @@ -0,0 +1,16 @@ +--- +title: Forms +slug: Web/Accessibility/ARIA/forms +translation_of: Web/Accessibility/ARIA/forms +--- +<p>The following pages provide various techniques for improving the accessibility of web forms:</p> + +<p>接下来的网页会为web表单技术的人提供一系列的知识：</p> + +<ul> + <li><a href="/en/Accessibility/ARIA/Basic_form_hints" title="Basic form hints">Basic form hints</a>: Adding hints and descriptions for invalid or required fields</li> + <li><a href="/en/Accessibility/ARIA/forms/alerts" title="alerts">Alerts</a>: Using alerts to provide client-side validation error messages</li> + <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">Multi-part labels</a>: Enabling complex form labels with a control inside each label</li> +</ul> + +<p>See also the <a class="external" href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Yahoo! article on form validation and ARIA</a>, covering much of the same content.</p> diff --git a/files/zh-cn/web/accessibility/aria/index.html b/files/zh-cn/web/accessibility/aria/index.html new file mode 100644 index 0000000000..da650a78f6 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/index.html @@ -0,0 +1,177 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA +--- +<p>Accessible Rich Internet Applications <strong>(ARIA)</strong> 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。</p> + +<p>ARIA是对超文本标记语言（HTML ）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术。例如，ARIA支持HTML4中的可访问导航地标、JavaScript小部件、表单提示和错误消息、实时内容更新等。</p> + +<p>ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。</p> + +<p>ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。</p> + +<div class="blockIndicator warning"> +<p>这些小部件中的许多后来被合并到HTML5中，如果存在这样的元素，<strong>开发人员应该更倾向使用对应的语义化HTML元素，而不是使用ARIA</strong>。例如，原生元素具有内置的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘可访问性</a>、角色和状态。但是，如果您选择使用ARIA，您有责任在脚本中模仿(等效的)浏览器行为。</p> +</div> + +<p>下面是一段进度条组件的代码：</p> + +<pre class="brush: html notranslate"><code><div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100" /></code> +</pre> + +<p>由于这个滚动条是用<code><div></code>写的，没有字面含义。然而，对开发者来说，在HTML4中，又没有更多的语义化的标签，所以我们需要引入ARIA这个角色和属性，这些是通过向元素添加属性来指定的。举个例子，<code>role="progressbar"</code>这个属性告诉浏览器，该元素其实是一个JavaScript实现的进度条组件。<code>aria-valuemin </code>和<code>aria-valuemax</code> 属性表明了进度条的最小值和最大值。 <code>aria-valuenow</code>则描述了当前进度条的状态， 因此它得用JavaScript来更新。</p> + +<p>除了直接给标签加属性，还可以通过JavaScript代码把ARIA属性添加到元素并动态地更新，如下面所示：</p> + +<pre class="brush: js notranslate"><code>// Find the progress bar <div> in the DOM. + var progressBar = document.getElementById("percent-loaded");</code> + +<code>// Set its ARIA roles and states, +// so that assistive technologies know what kind of widget it is.</code> + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + +// Create a function that can be called at any time to update +// the value of the progress bar. + function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); + } + +</pre> + +<div class="note"> +<p>注意由于ARIA是在HTML4之后引入的，所以在HTML4或XTHML中没有提供验证。然而，它提供的可访问性收益远远超过任何技术上的无效性。</p> + +<p>在HTML5中，所有的ARIA属性都是有效的。新的标记元素（<code><main></code>, <code><header></code>, <code><nav></code>等）都已具有了ARIA角色，所以就没必要再标注说明了。</p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Documentation" name="Documentation">ARIA 入门</h3> + + <dl> + <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">ARIA 介绍</a></dt> + <dd>关于借助 ARIA 使得动态内容可访问的快速介绍。也可参考经典的 <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA 介绍 - Gez Lemon</a>，2008 年。</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Web 应用与 ARIA FAQ</a></dt> + <dd>解答关于WAI-ARIA的问题并且解释为什么网站需要ARIA。</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">在视频频和屏幕阅读器使用 ARIA</a></dt> + <dd>从网上看到真实和简单的例子，包括“before”和“after”ARIA视频。</dd> + <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">在 HTML 使用 ARIA</a></dt> + <dd>A practical guide for developers. It suggests what ARIA attributes to use on HTML elements. Suggestions are based on implementation realities.一份为开发人员提供实用指南。它建议一些基于基于执行的在HTML元素上使用哪些ARIA属性。</dd> + </dl> + + <h3 id="ARIA_初级进阶">ARIA 初级进阶</h3> + + <dl> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">通过ARIA标签增强页面导航</a></dt> + <dd>A nice intro to using ARIA landmarks to improve web page navigation for screen reader users. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">See also, ARIA landmark implementation notes</a> and examples on real sites (updated as of July '11).</dd> + <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">提高表单可访问性</a></dt> + <dd>ARIA is not just for dynamic content! Learn how to improve accessibility of HTML forms using additional ARIA attributes. </dd> + <dt><a class="external" href="/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">ARIA 活动区域 </a></dt> + <dd>活动区域为屏幕阅读器提供关于如何处理一个页面内容变更的建议。</dd> + <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">用ARIA 活动区域去通知内容的改变</a></dt> + <dd>A quick summary of live regions, by the makers of JAWS screen reader software. Note that live regions are also supported by NVDA in Firefox, and VoiceOver with Safari (as of OS X Lion and iOS 5).</dd> + </dl> + + <h3 id="ARIA_与脚本组件">ARIA 与脚本组件</h3> + + <dl> + <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘导航与组件焦点</a></dt> + <dd>The first step in developing an accessible JavaScript widget is to make it keyboard navigable. This article steps through the process. The <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">Yahoo! focus management article</a> is a great resource as well.</dd> + <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Style Guide for Keyboard Navigation</a></dt> + <dd>A challenge with ARIA is getting developers to implement consistent behavior -- clearly best for users. This style guide describes the keyboard interface for common widgets.</dd> + </dl> + + <h3 id="ARIA_资源">ARIA 资源</h3> + + <dl> + <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">Widget Techniques, Tutorials, and Examples</a></dt> + <dd>Need a slider, a menu, or another kind of widget? Find resources here.</dd> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">ARIA-Enabled JavaScript UI Libraries</a></dt> + <dd>If you're starting a new project, choose a UI widget library with ARIA support already built-in. Warning: this is from 2009 -- content should be moved to an MDN page where it can be updated.</dd> + <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Accessibility of HTML5 and Rich Internet Applications - CSUN 2012 Workshop Materials</a></dt> + <dd>Includes slide presentations and examples.</dd> + </dl> + </td> + <td> + <h3 id="Community" name="Community">邮件列表</h3> + + <dl> + <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">Free ARIA Google Group</a></dt> + <dd>A place to ask questions about ARIA, as well as make suggestions for improving the ARIA documentation found on these pages.</dd> + </dl> + + <h3 id="Community" name="Community">博客</h3> + + <p>ARIA information on blogs tends to get out of date quickly. Still, there is some great info out there from other developers making ARIA work today.</p> + + <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> + + <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Accessible Culture</a></p> + + <p><a class="external" href="http://yaccessibilityblog.com/library/category/code/aria" title="http://yaccessibilityblog.com/library/category/code/aria">Yahoo! Accessibility</a></p> + + <h3 id="提交_Bug">提交 Bug</h3> + + <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">File ARIA bugs on browsers, screen readers, and JavaScript libraries</a>.</p> + + <h3 id="示例">示例</h3> + + <dl> + <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">ARIA 示例库</a></dt> + <dd>A set of barebones example files which are easy to learn from.</dd> + <dt><span class="external">可访问的 JS 组件库演示</span></dt> + <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd> + </dl> + + <dl> + <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Yahoo! 邮箱</a></dt> + <dd>Yahoo! puts it all together with Yahoo! Mail, a web app that almost looks like a native app. It works very well. As a <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">review of Yahoo! Mail</a> by screen reader Marco Zehe says, "Keep up the good work!".</dd> + </dl> + + <dl> + <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Yahoo! 搜索</a></dt> + <dd>Yahoo! has done an amazing job of advancing ARIA here, by exercising ARIA's full capabilities and <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">sharing their techniques</a>. Yahoo! Search uses a combination of ARIA landmarks, live regions, and widgets.</dd> + </dl> + + <h3 id="规范特性">规范特性</h3> + + <dl> + <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA Activities Overview at W3C</a></dt> + <dd>Authoritative Overview of WAI-ARIA Standardization efforts by the Web Accessibility Initiative (WAI)</dd> + <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">WAI-ARIA Specification</a></dt> + <dd>The W3C specification itself, useful as a reference. Note that, at this stage, it is important to test compatibility, as implementations are still inconsistent.</dd> + <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">WAI-ARIA Authoring Practices</a></dt> + <dd>Like the W3C WAI-ARIA specification, the official best practices represents a future ideal -- a day when authors can rely on consistent ARIA support across browsers and screen readers. The W3C documents provide an in-depth view of ARIA.<br> + <br> + For now, web developers implementing ARIA should maximize compatibility. Use best practices docs and examples based on current implementations.</dd> + <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">Open AJAX Accessibility Task Force</a></dt> + <dd>The Open AJAX effort centers around developing tools, sample files, and automated tests for ARIA.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Under Construction: WCAG 2.0 ARIA Techniques</a></dt> + <dd>The community needs a complete set of WCAG techniques for WAI-ARIA + HTML, so that organizations can be comfortable claiming their ARIA-enabled content is WCAG compliant. This is mostly important when regulations or policies are based on WCAG.</dd> + </dl> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td colspan="2"> + <h3 id="Related_Topics" name="Related_Topics">相关主题</h3> + + <dl> + <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibility</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/accessibility/index.html b/files/zh-cn/web/accessibility/index.html new file mode 100644 index 0000000000..e325d8958c --- /dev/null +++ b/files/zh-cn/web/accessibility/index.html @@ -0,0 +1,80 @@ +--- +title: 无障碍 +slug: Web/Accessibility +tags: + - Accessibility + - Landing +translation_of: Web/Accessibility +--- +<p>在Web开发无障碍性意味着使尽可能多的人能够使用Web站点,即使这些人的能力是有限的。这里我们提供关于开发易访问的内容的信息。</p> + +<div class="tran-result">“无障碍性是最常用于描述设施或设施,帮助残疾人,如“轮椅”。这可以扩展到盲文标识、轮椅坡道,音频信号在人行横道,轮廓人行道,网站设计,等等。" <a href="http://en.wikipedia.org/wiki/Accessibility">维基百科条目可访问性</a></div> + +<div class="tran-result"></div> + +<p>"<strong>网络从根本上是为了为所有的人工作</strong>, 无论他们的硬件、软件、语言、文化、位置或身体或精神能力。当网络达到这一目标,它可以被不同的人的听觉范围,运动,和认知能力访问。" <a href="http://www.w3.org/standards/webdesign/accessibility" title="http://www.w3.org/standards/webdesign/accessibility">W3C - 可访问性</a></p> + +<div class="cleared topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">主要教程</h2> + +<dl> + <dt>MDN <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility">无障碍学习区</a> 包含现代的最新教程，涵盖无障碍性要点：<br> + <br> + <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/What_is_accessibility">什么是可访问性？</a><br> + 这篇文章很好的介绍无障碍性的实际情况——包括我们需要考虑哪些人群以及为什么，人们用什么工具与Web进行交互，以及我们的网站无障碍如何开发的流程<br> + <br> + <a href="https://developer.mozilla.org/zh-CN/docs/learn/Accessibility/HTML:%E4%B8%BA%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7%E6%8F%90%E4%BE%9B%E4%B8%80%E4%B8%AA%E8%89%AF%E5%A5%BD%E7%9A%84%E5%9F%BA%E7%A1%80">HTML : 无障碍性的良好基础</a><br> + 通过使用正确的HTML元素确保始终正确，无障碍性的web内容保证。本文详细介绍如何使用HTML 来确保无障碍性。<br> + <br> + <a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/CSS_and_JavaScript">CSS 和 JavaScript 无障碍最佳做法</a></dt> + <dt> CSS和 JavaScript 正确使用时，也是具有达到无障碍网络体验的能力，但滥用情况下，也会严重损害无障碍性。本文概述了一些 CSS 和 JavaScript最佳实践，以尽可能包括无障碍性的复杂内容。<br> + </dt> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA基础知识</a></dt> + <dt> 从之前的一篇文章来看，有时候制作复杂的UI控件涉及非正规的HTML和动态JavaScript更新的内容可能很困难。WAI-ARIA是一种通过添加进一步的语义让浏览器和无障碍技术可以识别和使用，让用户知道发生了什么。这里我们将介绍如何提高无障碍性的基础知识。<br> + </dt> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/Multimedia">无障碍多媒体</a></dt> + <dt>另一类造成无障碍问题就是多媒体—视频，音频和图像需要给出适当的文本替代，以便可以通过辅助技术及其用户来理解。本文内容如上。<br> + </dt> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/Mobile">移动无障碍</a></dt> + <dt>随着移动设备网络访问的受欢迎，流行平台( IOS 和 Android ) 具有完善的辅助功能工具，重要的是在这些平台考虑你网站的无障碍性。本文将介绍无障碍移动专用的注意事项。</dt> + <dd></dd> + <dt> + <h2 id="其他文件">其他文件</h2> + + <p><a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Understanding_WCAG">了解Web内容无障碍功能指南</a><br> + 这组文章提供了快速解释，以帮助你了解需要采取的步骤，以符合W3C web 内容辅助功能指南2.0的建议</p> + + <p><a href="https://developer.mozilla.org/en/Accessibility/Keyboard-navigable_JavaScript_widgets">键盘导航的 JavaScript小部件</a><br> + 直到现在，想要使他们的风格基于<div> 和 <span> 的小元素的网络开发人员缺乏适当的技术。无障碍关键是开发人员应该注意的最小无障碍要求的一部分。</p> + </dt> + <dt><a href="/zh-CN/docs/Accessibility/ARIA">ARIA</a></dt> + <dt>一组文章,学习如何利用ARIA使你的HTML文档更容易理解。<br> + </dt> + <dt><a href="/zh-CN/docs/Accessibility/AT_Development" title="AT Development">辅助技术(AT)发展</a></dt> + <dt>针对辅助技术（AT）开发人员文章的集合</dt> + <dd></dd> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/Mobile_accessibility_checklist">移动辅助功能清单</a></dt> + <dt>本文档提供了移动应用开发人员无障碍要求的简明清单</dt> +</dl> + +<p><span class="alllinks"><a href="/zh-CN/docs/tag/Accessibility" title="/zh-CN/docs/tag/Accessibility">查看所有关于可访问性的文章...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">web开发人员工具</h2> + +<ul> + <li><a class="external" href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html" title="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">自动化可访问性测试</a></li> + <li><a class="external" href="http://www.standards-schmandards.com/index.php?show/fangs">尖牙屏幕阅读模拟器</a></li> +</ul> + +<p><span class="alllinks"><a href="/zh-CN/docs/tag/Accessibility:Tools" title="zh-CN/docs/tag/Accessibility:Tools">查看全部...</a></span></p> + +<h2 id="其他有用的网站"><span class="web-item">其他有用的网站 </span></h2> + +<ul> + <li><a class="external" href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">屏幕阅读器列表</a></li> +</ul> +</div> +</div> diff --git a/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html new file mode 100644 index 0000000000..178539ea3a --- /dev/null +++ b/files/zh-cn/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -0,0 +1,205 @@ +--- +title: 键盘导航的 JavaScript 组件 +slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +<p>键盘导航 JavaScript 组件</p> + +<h3 id="概况">概况</h3> + +<p>网页应用经常使用 JavaScript 来模拟桌面组件，比如菜单、树状视图、富文本以及标签面板等。网页中这些组件通常是由 {{ HTMLElement("div") }}和 {{ HTMLElement("span") }} 等元素组合而成，并不是原生的，也不会提供对应的桌面组件所拥有的键盘功能。本文档主要描述能让 JavaScript 组件通过键盘 access 的技术。</p> + +<h3 id="利用_tabindex">利用 tabindex</h3> + +<p>最初 tabindex 出现是做为 HTML4的一部分，提供一种手段让开发人员定义元素的顺序，可以让用户通过键盘按此顺序来获取焦点。最新在 HTML5 草案里面针对 tabindex 的具体行为表现做了改动。所有主流浏览器都已经实现了这个修改后的设计。</p> + +<p>下面表格阐述在主流浏览器里面 <code>tabindex</code> 的表现:</p> + +<table class="fullwidth-table" style="width: 75% !important;"> + <tbody> + <tr> + <th><code>tabindex</code> 属性</th> + <th>可用鼠标或者 用 JavaScript 语句 <code>element.focus()获取焦点</code></th> + <th>可使用Tab 键导航获取焦点</th> + </tr> + <tr> + <td> + <p>not present</p> + + <p>（未设置）</p> + </td> + <td>遵循所在平台针对此元素的默认行为 (yes for form controls, links, etc.).</td> + <td>遵循所在平台针对此元素的默认行为</td> + </tr> + <tr> + <td>Negative (i.e. <code>tabindex="-1"</code>)</td> + <td>Yes</td> + <td>No; 必须通过 <code><a class="external text" href="../../../../En/DOM/Element.focus" rel="nofollow" title="https://developer.mozilla.org/En/DOM/Element.focus">focus()</a></code> 来聚焦该元素。可以在方向键或者其他键的响应里面做。</td> + </tr> + <tr> + <td>Zero (i.e. <code>tabindex="0"</code>)</td> + <td>Yes</td> + <td>tab顺序对应于该元素在文档中的位置</td> + </tr> + <tr> + <td>Positive (e.g. <code>tabindex="33"</code>)</td> + <td>Yes</td> + <td><code>tabindex</code> 值决定了元素的tab顺序：通常这些带有正数值的tabindex元素会排在tabindex="0"和原生可以tabable的元素前面；特别指出的是值越小越排在前面（举个例子，<code>tabindex="7"</code> 会排在<code>tabindex="11"前面</code>)</td> + </tr> + </tbody> +</table> + +<h4 id="简单控件_Simple_Controls"><span style="color: #000000;"><span class="toctext">简单控件 Simple Controls</span></span></h4> + +<p>可以在 {{ HTMLElement("div") }} or {{ HTMLElement("span") }} 元素上设置 tabindex="0" 使得此简单控件变得可 tab 导航.这里有个 span-based checkbox 使用这个方法的例子。</p> + +<p><em>Example 1: A simple image-based checkbox widget using tabindex to allow keyboard access</em></p> + +<pre class="brush: html"><code><!-- 没有tabindex 属性的话, 这些 <span> 元素不会被键盘focus中 --> +<div> + <span role="checkbox" aria-checked="true" tabindex="0"> + <img src="checked.gif" role="presentation" alt="" /> + Include decorative fruit basket + </span> +</div> +<div> + <span role="checkbox" aria-checked="true" tabindex="0"> + <img src="checked.gif" role="presentation" alt="" /> + Include singing telegram + </span> +</div> +<div> + <span role="checkbox" aria-checked="false" tabindex="0"> + <img src="unchecked.gif" role="presentation" alt="" /> + Require payment before delivery + </span> +</div></code> +</pre> + +<h4 id="组合控件_Grouping_controls"><span style="color: #000000;"><span class="toctext">组合控件 Grouping controls</span></span></h4> + +<p>针对像菜单、标签面板、树等这些组合控件，父元素应该在 tab 序列里面(tabindex="0") 而每个后代选择/标签/单元/行应该从 tab 序列里面移除(tabindex="-1")。用户应该可通过方向键来操控这些后代元素。(关于组件一般预期的键盘支持，可以查看 <a class="external text" href="http://access.aol.com/dhtml-style-guide-working-group/" rel="nofollow" title="http://access.aol.com/dhtml-style-guide-working-group/">DHTML Style Guide</a>.)</p> + +<p>下面这个组合菜单的例子展示了这种技术的使用。 一旦键盘 focus 中容器 ul 元素，Javascript 开发人员需要在键盘事件里针对方向键的响应里管理里面元素的 focus 顺序。在组件里管理 focus 的办法，看下面这个<span style="line-height: 1.5;"> "在组合控件里管理 focus " 例子.</span></p> + +<p><em>范例 2: 一个使用 tabindex 控制键盘 access 的菜单控件</em></p> + +<pre class="brush: html"><code><ul id="mb1" tabindex="0"> + <li id="mb1_menu1" tabindex="-1"> Font + <ul id="fontMenu" title="Font" tabindex="-1"> + <li id="sans-serif" tabindex="-1">Sans-serif</li> + <li id="serif" tabindex="-1">Serif</li> + <li id="monospace" tabindex="-1">Monospace</li> + <li id="fantasy" tabindex="-1">Fantasy</li> + </ul> + </li> + <li id="mb1_menu2" tabindex="-1"> Style + <ul id="styleMenu" title="Style" tabindex="-1"> + <li id="italic" tabindex="-1">Italics</li> + <li id="bold" tabindex="-1">Bold</li> + <li id="underline" tabindex="-1">Underlined</li> + </ul> + </li> + <li id="mb1_menu3" tabindex="-1"> Justification + <ul id="justificationMenu" title="Justication" tabindex="-1"> + <li id="left" tabindex="-1">Left</li> + <li id="center" tabindex="-1">Centered</li> + <li id="right" tabindex="-1">Right</li> + <li id="justify" tabindex="-1">Justify</li> + </ul> + </li> +</ul></code></pre> + +<h4 id="失效控件"><span class="toctext">失效控件</span></h4> + +<p>当一个自定义控件变成失效（disabled）状态时，通过设置 tabindex="-1" 把它从 tab 序列里面移除。注意在一个组合组件里面失效状态的子项（比如菜单控件里面某一个菜单项）应该在方向键的响应事件里面跳过它不让 focus 中。</p> + +<h3 id="在组合控件里面管理_focus">在组合控件里面管理 focus</h3> + +<p>当用户从一个组件 tab 离开之后 focus 回来，焦点应该回到离开之时正被 focus 中的元素上，比如某个树节点或者网格单元. 有两种办法完成这一点：</p> + +<ol> + <li><code><font face="Open Sans, sans-serif"><span style="line-height: 21px;">流动 </span></font>tabindex</code>: 通过编程移动 focus</li> + <li><code>aria-activedescendent</code>: 管理一个“虚拟” focus</li> +</ol> + +<h4 id="方法_1_流动_tabindex"><span style="color: #000000;"><span class="toctext">方法 1: 流动 tabindex</span> </span></h4> + +<p>在被 focus 中元素上设置 <code>tabindex</code> 为 "0"，这样可以保证在用户在 tab 离开又返回后仍然选中组合组件中之前被选中的那项。注意在更改 tabindex 为“0”同时需要把之前选中过的那项设置<code>tabindex="-1"</code>。这个方法包含在键盘事件里面通过程序移动焦点以及更改 <code>tabindex</code> 到当前焦点中的那项上。需要做以下几步：</p> + +<p>在每个元素上绑定 key down 事件，当捕捉到控制移动到另外元素的方向键时：</p> + +<ol> + <li>通过编码把 focus 应用到新元素上,</li> + <li>更改被 focus 中元素上的 tabindex 为“0”</li> + <li>更改之前被 focus 中元素的 tabindex 为“-1”.</li> +</ol> + +<p>这里有个 <a class="external text" href="http://www.oaa-accessibility.org/example/40/" rel="nofollow" title="http://www.oaa-accessibility.org/example/40/">WAI-ARIA tree view</a> 的例子是使用这种方案的。</p> + +<h5 id="提示">提示</h5> + +<h6 id="用_element.focus()_来设置焦点_focus">用 element.focus() 来设置焦点 focus</h6> + +<p>不要使用 <code>createEvent()</code>, <code>initEvent()</code> 和 <code>dispatchEvent()</code> 来发送焦点事件到元素上。DOM的focus事件被认为仅是一种信息：当有事物被focus中的时候系统自动产生的，但是实际上没有用来设置焦点。用 <code>element.focus()</code> 来替代。</p> + +<h6 id="用_onfocus_来追踪当前_focus">用 onfocus 来追踪当前 focus</h6> + +<p>不要认为所有的焦点变化都来自于键盘和鼠标事件：像屏幕阅读器之类的辅助技术可以设置焦点到任意一个可focus 中的元素上。用 onfocus 和 onblur来追踪焦点。</p> + +<p><code>onfocus</code> 和 <code>onblur</code> 现在可以在每个元素上使用。没有标准的 DOM 接口来获取当前文档的focus，所以如果你想追踪就需要保存追踪数据在 JavaScript 变量里。</p> + +<h4 id="方法_2_aria-activedescendant">方法 2: aria-activedescendant</h4> + +<p>这个办法包含绑定一个单独的事件句柄到容器窗口组件上，运用 <code>aria-activedescendent属性</code>来追踪一个 "虚拟" 焦点。（关于ARIA更多的信息, 查看 <a class="external text" href="../../../../An_Overview_of_Accessible_Web_Applications_and_Widgets" rel="nofollow" title="https://developer.mozilla.org/An_Overview_of_Accessible_Web_Applications_and_Widgets">overview of accessible web applications and widgets</a>.）</p> + +<p><code>aria-activedescendant</code> 属性用来标识拥有虚拟焦点的后代元素的 ID。在窗口容器的事件句柄里面在键盘和鼠标事件响应更新 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">aria-activedescendant 值并且确保当前</span><span style="line-height: 1.5;">The event handler on the container must respond to key and mouse events by updating the value of </span><code style="font-size: 14px;">aria-activedescendant</code><span style="line-height: 1.5;"> and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this </span><a class="external text" href="http://www.oaa-accessibility.org/example/28/" rel="nofollow" style="line-height: 1.5;" title="http://www.oaa-accessibility.org/example/28/">ARIA radiogroup example</a><span style="line-height: 1.5;"> for a direct illustration of how this works.</span></p> + +<h5 id="Tips">Tips</h5> + +<h6 id="scrollIntoView">scrollIntoView</h6> + +<p>Note that the use of this pattern requires the author to ensure that the current <em>focused</em> widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the <a class="external text" href="http://www.quirksmode.org/dom/tests/scrollintoview.html" rel="nofollow" title="http://www.quirksmode.org/dom/tests/scrollintoview.html">quirksmode test</a>.</p> + +<h6 id="Issues">Issues</h6> + +<ul> + <li><a class="external text" href="http://www.quirksmode.org/dom/w3c_cssom.html" rel="nofollow" title="http://www.quirksmode.org/dom/w3c_cssom.html">quirksmode reports problems in Opera, and Konqueror</a></li> + <li><a class="external text" href="https://bugzilla.mozilla.org/show_bug.cgi?id=450405" rel="nofollow" title="https://bugzilla.mozilla.org/show_bug.cgi?id=450405">Firefox 3.0.1 introduced bug</a></li> +</ul> + +<h3 id="一般准则">一般准则</h3> + +<h4 id="使用_onkeydown_来捕获的关键事件，而不是_onkeypress_事件">使用 onkeydown 来捕获的关键事件，而不是 onkeypress 事件</h4> + +<p>IE 不会触发非字母数字键的 <code>keypress </code>事件。使用 <code>onkeydown</code> 替代。</p> + +<h4 id="确保键盘和鼠标有相同的体验">确保键盘和鼠标有相同的体验</h4> + +<p>为了确保不同输入设备的用户体验一致，键盘和鼠标事件处理程序在适当的情况下应该共享代码。例如，当用户使用方向键导航的时候，一些代码会更新相应元素的 <code>tabindex</code><font face="Courier New, Andale Mono, monospace"> </font>或风格，用鼠标点击也应该有同样的变化。</p> + +<h4 id="确保键盘可以激活元素">确保键盘可以激活元素</h4> + +<p>要确保键盘可以激活元素，所有鼠标事件的绑定也同时要绑定到键盘事件上。例如，为了确保回车键能激活某个元素，如果你使用了 <code>onclick="DoSomething()"，</code> 你需要把 <code>doSomething()</code> 绑定到 key down 事件上：<code>onkeydown="return event.keyCode != 13 || doSomething();"</code>.</p> + +<h4 id="不要使用_focus_来设置焦点的样式（如果要兼容IE7及更早版本）">不要使用 :focus 来设置焦点的样式（如果要兼容IE7及更早版本）</h4> + +<p>IE 7 及更早版本不支持 <code>:focus</code> 伪选择器，不要用它来设置焦点的样式。替代方法是在 <code>onfocus </code>事件处理程序中设置样式，例如，添加一个 CSS 样式到 <code>class</code> 属性中。</p> + +<h4 id="始终用程序为_tabindex-1_的项和元素设置焦点样式"><span style="font-size: 1.28571428571429rem;">始终</span>用程序为 tabindex="-1" 的项和元素设置焦点样式</h4> + +<p>IE 不会自动为<code> tabindex="-1" </code>的元素绘制聚焦框。可以选择一种方法解决，比如通过 <code>this.style.backgroundColor="gray"</code> 改变选中项目的背景颜色，或通过 <code>this.style.border="1px dotted invert"</code> 添加虚线边框。如果使用虚线边框的，需要确保这些元素有隐含的一象素边框，这样，当聚焦的边框样式应用上去的时候，元素的大小才不会改变（边框会占用空间，而 IE 没有实现 CSS outline）。 </p> + +<h4 id="阻止浏览器的按键事件处理">阻止浏览器的按键事件处理</h4> + +<p>如果你用自己的插件处理按键事件，可以通过事件处理程序的返回值来阻止浏览器的缺省处理（例如，响应方向键的滚动）。如果你的事件处理程序返回 <code>false</code>，事件就不会冒泡到处理程序外面。</p> + +<p>例如:</p> + +<pre><code><span tabindex="-1" onkeydown="return handleKeyDown();"></code></pre> + +<p>如果 <code>handleKeyDown()</code> 返回 <code>false</code>，将会结束事件处理，阻止浏览器继续处理按键行为。</p> + +<h4 id="不要认为按键连发（repeat）有一致性">不要认为按键连发（repeat）有一致性</h4> + +<p>非常不幸，<code>onkeydown 连发或不连发</code>取决于代码执行的浏览器和操作系统。</p> diff --git a/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.html b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..174d2de0b1 --- /dev/null +++ b/files/zh-cn/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,103 @@ +--- +title: 移动可访问性清单 +slug: Web/Accessibility/Mobile_accessibility_checklist +tags: + - Firefox OS + - 指南 + - 无障碍 + - 清单 + - 移动端 +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +<div class="summary"> +<p><span class="seoSummary">该文档为移动应用开发者提供一个无障碍需求的简要清单。此文档将随着技术模式的发展而不断演进。</span></p> +</div> + +<h2 id="颜色">颜色</h2> + +<ul> + <li>颜色对比度<strong>必须</strong>遵循 <a href="http://www.w3.org/TR/WCAG/">WCAG 2.0</a> AA 等级需求： + + <ul> + <li>普通文本的对比率为 4.5:1 （小于18磅或黑体14磅）</li> + <li>大文本对比率为 3:1（大于等于18磅或黑体14磅）【译者注：字体单位为point、PT】</li> + </ul> + </li> + <li>颜色传递的信息，<strong>必须</strong>也通过其它方式标明（例如，链接文本中的下划线）</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: Jon Snook 开发的 <a href="http://snook.ca/technical/colour_contrast/colour.html">颜色对比度检查器 - Colour Contrast Checker</a> 可以轻松检查前景和背景的对比度。同样，<a href="http://contrast-finder.tanaguru.com/">Tanaguru Contrast-Finder</a> 这个工具能做类似的检查，并且会推荐你考虑使用类似的更好的对比度</p> +</div> + +<h2 id="可视化">可视化</h2> + +<ul> + <li><strong>不</strong>使用用于隐藏内容的技巧处理视觉效果，例如，不透明度为零，z-index 规则，离屏位置。</li> + <li>当前可见的屏幕之外的内容，<strong>必须</strong>是不可见的。（特别是单一页面应用中包含多个卡片选项）: + <ul> + <li><strong>使用</strong> <code>hidden</code> 特性或 <code>visibility</code> 或 <code>display</code> 样式属性.</li> + <li>除非不可避免，<strong>不应该</strong>使用 <code>aria-hidden</code> 特性。</li> + </ul> + </li> +</ul> + +<h2 id="焦点">焦点</h2> + +<ul> + <li>所有可激活元素<strong>必须</strong>可被聚焦: + + <ul> + <li>标准控件，如链接、按钮、表单域默认可被聚焦。</li> + <li>非标准控件<strong>必须</strong>分配给它们一个适当的 <a href="http://www.w3.org/TR/wai-aria/roles">ARIA Role</a> 如 <code>button</code>，<code>link</code> 或者 <code>checkbox</code>。</li> + </ul> + </li> + <li>焦点应该是有逻辑顺序，且方式一致。</li> +</ul> + +<h2 id="文本等效">文本等效</h2> + +<ul> + <li>应用中，每个展示的非文本元素都<strong>必须</strong>提供等效文本。 + + <ul> + <li>恰当的位置使用 <em>alt</em> 和 <em>title</em> （请参考Steve Faulkner的帖子 - 关于 <a href="http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute</a> 。）</li> + <li>如果上面的特性不适用，使用恰当的<a href="http://www.w3.org/WAI/PF/aria/states_and_properties#global_states_header">ARIA Properties</a>，比如 <code>aria-label</code>, <code>aria-labelledby</code>, 或 <code>aria-describedby</code>.</li> + </ul> + </li> + <li><strong>必须</strong>避免文本图像.</li> + <li>所有的表单控件<strong>必须</strong>有标签 ({{ htmlelement("label") }} elements) ，以便于读屏用户的使用。</li> +</ul> + +<h2 id="状态处理">状态处理</h2> + +<ul> + <li>标准控件，如单选按钮和复选是通过操作系统处理的，而其它自定义控件的状态改变需要通过 <a href="http://www.w3.org/TR/wai-aria/states_and_properties#attrs_widgets_header">ARIA States</a> ，如<code> aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code>,和 <code>aria-pressed</code>.</li> +</ul> + +<h2 id="General_Guidelines常规指南">General Guidelines常规指南</h2> + +<ul> + <li>应用必须提供标题。【译者注：此处的标题为title】</li> + <li>标题<strong>不能</strong>破坏层次结构。【译者注：此处的标题为headings】 + <pre class="brush: html"><h1>Top level heading</h1> + <h2>Secondary heading</h2> + <h2>Another secondary heading</h2> + <h3>Low level heading</h3></pre> + </li> + <li>应使用 <a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles_header">ARIA Landmark Roles</a> 描述应用或文档的结构，如 <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li> + <li>触摸事件处理器，只能通过 <code>touchend</code> 事件触发。</li> + <li>触摸目标必须足够大，方便用户交互(参考 <a href="http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> 关于触摸目标尺寸的指南)</li> +</ul> + +<div class="note"> +<p><strong>注</strong>: <a href="http://www.tanaguru.com/">Tanaguru's automated accessibility testing service</a> 提供一个有效的方法，排查网页上的，或者是可安装的Web应用中无障碍问题（如，Firefox OS）。<a href="http://tanaguru.org/">tanaguru.org</a>，你可以参与该项目或者发现更多技术实现。</p> +</div> + +<div class="note"> +<p><strong>注</strong>: The 该文档的最初版本 - <a href="http://yzen.github.io/firefoxos/2014/04/30/mobile-accessibility-checklist.html">original version of this document</a> 是由 <a href="http://yzen.github.io/">Yura Zenevich</a> 完成。</p> +</div> + +<div class="note"> +<p><strong>【译者声明】</strong>: 该版本翻译由<a href="mailto:hbwhzk@hotmail.com">Kenny Zhang</a>完成，但不代表认同作者的所有技术观点。</p> +</div> diff --git a/files/zh-cn/web/accessibility/web_development/index.html b/files/zh-cn/web/accessibility/web_development/index.html new file mode 100644 index 0000000000..3970274f1a --- /dev/null +++ b/files/zh-cn/web/accessibility/web_development/index.html @@ -0,0 +1,47 @@ +--- +title: Web Development +slug: Web/Accessibility/Web_Development +tags: + - 网页无障碍访问 +translation_of: Web/Accessibility +--- +<p class="summary"><span class="seoSummary">本篇文档为开发者提供了有关网站无障碍访问以及XUL无障碍开发的更多信息。</span></p> + +<table> + <tbody> + <tr> + <td style="vertical-align: top;"> + <h2 id="网页无障碍访问">网页无障碍访问</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA">ARIA - 针对开发者</a></dt> + <dd>ARIA的应用，使得动态HTML的页面内容具有了无障碍的可访问性。在许多的示例中我们都使用了ARIA应用，例如：在线内容区域以及Javascript小组件等。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets">Javascript 组件之键盘导航</a></dt> + <dd>到现在为止，那些想让基于固有组件的<DIV>和<span>拥有特定样式的Web开发人员，在技术层面都略欠火候。键盘辅助的可用性，同样是必要需求之一，需要开发人员引起足够的重视。</dd> + </dl> + + <h2 id="XUL_可访问性">XUL 可访问性</h2> + + <dl> + <dt> </dt> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Building_accessible_custom_components_in_XUL">在XUL中构建可访问的自定义组件</a></dt> + <dd>使用DHTML无障碍访问技术，来为自定义的XUL组件添加可访问属性。</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/XUL_accessibility_guidelines">可访问性XUL使用指南</a></dt> + <dd>当根据使用指南编写完成的同时, XUL有能力自行整合出无障碍用户界面。程序员、核查者、设计师以及质量监管工程师都应该对使用指南保持一定的熟悉程度。</dd> + </dl> + </td> + <td style="vertical-align: top;"> + <h2 id="外部资源">外部资源</h2> + + <dl> + <dt><a href="http://diveintoaccessibility.info/">深入探寻无障碍访问</a></dt> + <dd>这本书回答了两个问题。第一个问题是：“为什么我要让我的网站更具无障碍访问性？”第二个问题是“如何使我的网站做到这一点？”</dd> + <dt><a href="http://www-03.ibm.com/able/guidelines/web/accessweb.html">无障碍访问网页的编写</a></dt> + <dd>这是一本来自于IBM的便携式无障碍访问列表。</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p> </p> |