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.
+_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._ -<!-- 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>
+```html
+
+
-<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>
+
+```
-Chapter 1 content goes here
+ Chapter 2 content goes here
+ Quiz content goes here
+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.
- 
ARIA
+## ARIA -WAI-ARIA, 来自 W3C 的网络无障碍计划（Web Accessibility Initiative） 的可访问的富互联网应用程序（Accessible Rich Internet Applications）规范，提供了一种添加辅助技术（如屏幕阅读器）所需的缺少语义的方法。ARIA 使开发人员可以通过向标记添加特殊属性来更详细地描述其小部件。 旨在填补在动态 web 应用在发现的标准 HTML 标签与桌面式控件之的差距，ARIA 提供了角色和状态以描述大多数常见的 UI 小部件的行为。
+[WAI-ARIA](http://www.w3.org/WAI/intro/aria.php), 来自 W3C 的网络无障碍计划（[Web Accessibility Initiative](http://www.w3.org/WAI/)） 的可访问的富互联网应用程序（**Accessible Rich Internet Applications**）规范，提供了一种添加辅助技术（如屏幕阅读器）所需的缺少语义的方法。ARIA 使开发人员可以通过向标记添加特殊属性来更详细地描述其小部件。 旨在填补在动态 web 应用在发现的标准 HTML 标签与桌面式控件之的差距，ARIA 提供了角色和状态以描述大多数常见的 UI 小部件的行为。 -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.
+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. -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.
+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. -Example 3: Markup for the tabs widget with ARIA attributes added.
+_Example 3: Markup for the tabs widget with ARIA attributes added._ -<!-- Now *these* are Tabs! -->
-<!-- We've added role attributes to describe the tab list and each tab. -->
-<ol role="tablist">
- <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>
+```html
+
+
+
-<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>
-
+
+
+```
-Chapter 1 content goes here
+ Chapter 2 content goes here
+ Quiz content goes here
+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.
+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. -?可见性变化
+### 可见性变化 -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.
+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. -状态变化
+#### 状态变化 -ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to):
+ARIA provides attributes for declaring the current state of a UI widget. Examples include (but are certainly not limited to): --
-
aria-checked: indicates the state of a checkbox or radio button
- aria-disabled: indicates that an element is visible, but not editable or otherwise operable
- aria-grabbed: indicates the 'grabbed' state of an object in a drag-and-drop operation
-
(For a full list of ARIA states, consult the ARIA list of states and properties.)
+(For a full list of ARIA states, consult the [ARIA list of states and properties](http://www.w3.org/TR/wai-aria/states_and_properties).) -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).
+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). -The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. 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.
+The Open Ajax Alliance website provides an example of CSS attribute selectors based on ARIA states. 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. -In this example, the HTML for a menu has the form shown in Example 1a. Note how, on lines 7 and 13, the aria-checked property is used to declare the selection state of the menu items.
Example 1a. HTML for a selectable menu.
+_Example 1a. HTML for a selectable menu._ -<ul id="fontMenu" class="menu" role="menu" aria-hidden="true"> - <li id="sans-serif" +```html +
li[aria-checked="true"] {
+```css
+li[aria-checked="true"] {
font-weight: bold;
background-image: url('images/dot.png');
background-repeat: no-repeat;
background-position: 5px 10px;
}
-
+```
-The JavaScript to update the aria-checked property has the form shown in Example 1c. Note that the script only updates the aria-checked attribute (lines 3 and 8); it does not need to also add or remove a custom classname.
Example 1c. JavaScript to update the aria-checked attribute.
+_Example 1c. JavaScript to update the aria-checked attribute_. -var processMenuChoice = function(item) {
+```js
+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 ) {
+ if ( sib.nodeType === 1 && sib !== item ) {
sib.setAttribute('aria-checked', 'false');
}
}
};
-
+```
-可见度变化
+#### 可见度变化 -When content visibility is changed (i.e., an element is hidden or shown), developers should change the aria-hidden property value. The techniques described above should be used to declare CSS to visually hide an element using display:none.
The Open Ajax Alliance website provides an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. 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.
In this example, the HTML for the tooltip has the form shown in Example 2a. Line 9 sets the aria-hidden state to true.
Example 2a. HTML for a tooltip.
+_Example 2a. HTML for a tooltip._ -<div class="text"> - <label id="tp1-label" for="first">First Name:</label> - <input type="text" id="first" name="first" size="20" +```html ++ + + ++``` -The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the
+The CSS for this markup is shown in Example 2b. Note that there is no custom classname used, only the status of the **`aria-hidden`** attribute on line 1. -aria-hiddenattribute on line 1.Example 2b. Attribute-based selector for indicating state.
+_Example 2b. Attribute-based selector for indicating state._ -div.tooltip[aria-hidden="true"] { +```css +div.tooltip[aria-hidden="true"] { display: none; } -+``` -The JavaScript to update the
+The JavaScript to update the **`aria-hidden`** property has the form shown in Example 2c. Note that the script only updates the **`aria-hidden`** attribute (line 2); it does not need to also add or remove a custom classname. -aria-hiddenproperty has the form shown in Example 2c. Note that the script only updates thearia-hiddenattribute (line 2); it does not need to also add or remove a custom classname.Example 2c. JavaScript to update the aria-checked attribute.
+_Example 2c. JavaScript to update the aria-checked attribute._ -var showTip = function(el) { +```js +var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); -}+} +``` -角色变化
+### 角色变化 --备注： 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
+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 **`role`** of `menubar` and each {{ HTMLElement("li") }} should be given a **`role`** of `menuitem`. -roleofmenubarand each {{ HTMLElement("li") }} should be given aroleofmenuitem.The
+The **`role`** of an element should not change. Instead, remove the original element and replace it with an element with the new **`role`**. -roleof an element should not change. Instead, remove the original element and replace it with an element with the newrole.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
+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 **`role`** to `button`, then switching to "edit" mode by making the element writable and removing the **`role`** attribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics). -roletobutton, then switching to "edit" mode by making the element writable and removing theroleattribute in "edit" mode (since {{ HTMLElement("input") }} elements have their own role semantics).Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a
+Do not do this. Instead, implement the "view" mode using a different element altogether, such as a {{ HTMLElement("div") }} or {{ HTMLElement("span") }} with a **`role`** of `button`, and the « edit » mode using a text {{ HTMLElement("input") }} element. -roleofbutton, and the « edit » mode using a text {{ HTMLElement("input") }} element.?异步内容变化
+### 异步内容变化 -+> **备注：** See also [Live Regions](/en/ARIA/Live_Regions) -备注： See also Live Regions
键盘导航
+## 键盘导航 -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.
+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. -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.
+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. -Here's a summary of how keyboard navigation should work in an ARIA-enabled web application:
+Here's a summary of how keyboard navigation should work in an ARIA-enabled web application: --
+- 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. +- 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. +- When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control. +- Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action. +- If in doubt, mimic the standard desktop behavior of the control you are creating. -- 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.
-- 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.
-- When the widget is not inside a form, both the Enter and Spacebar keys should select or activate the control.
-- Within a form, the Spacebar key should select or activate the control, while the Enter key should submit the form's default action.
-- If in doubt, mimic the standard desktop behavior of the control you are creating.
-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 Keyboard-navigable JavaScript widgets describes how to implement this behavior with JavaScript.
+So, for the Tabs widget example above, the user should be able to navigate into and out of the widget's container (the \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 \
- 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 [Keyboard-navigable JavaScript widgets](/en/Accessibility/Keyboard-navigable_JavaScript_widgets) describes how to implement this behavior with JavaScript. -
For more detail about desktop-style keyboard navigation conventions, a comprehensive DHTML style guide 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 ARIA Best Practices document that includes keyboard navigation and shortcut conventions for a variety of widgets.
+For more detail about desktop-style keyboard navigation conventions, a comprehensive [DHTML style guide](http://access.aol.com/dhtml-style-guide-working-group/) 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 [ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) document that includes keyboard navigation and shortcut conventions for a variety of widgets. -参见
+## 参见 --
+- [ARIA](/en/ARIA) +- [Web applications and ARIA FAQ](/en/Accessibility/Web_applications_and_ARIA_FAQ) +- [WAI-ARIA Specification](http://www.w3.org/TR/wai-aria/) +- [WAI-ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) +- [DHTML Style Guide](http://access.aol.com/dhtml-style-guide-working-group/) diff --git a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md index e6aed25d8053e1..30206bd60285b0 100644 --- a/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md +++ b/files/zh-cn/web/accessibility/aria/aria_live_regions/index.md @@ -3,67 +3,63 @@ title: ARIA live regions slug: Web/Accessibility/ARIA/ARIA_Live_Regions translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions --- -- ARIA
-- Web applications and ARIA FAQ
-- WAI-ARIA Specification
-- WAI-ARIA Best Practices
-- DHTML Style Guide
-使用 JavaScript，我们可以动态更改页面的某些部分，而无需重新加载整个页面——例如，可以动态更新搜索结果列表，或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的，但是对于残疾用户来说，它们可能并不明显。ARIA Live 区域填补了这个空白，并提供了一种以编程方式显现动态内容更改的方法，这种方式可以由残疾辅助技术提供提示。
+使用 JavaScript，我们可以动态更改页面的某些部分，而无需重新加载整个页面——例如，可以动态更新搜索结果列表，或者显示不需要用户交互的警告或通知。虽然这些更改对于能够看到页面的用户来说通常是显而易见的，但是对于残疾用户来说，它们可能并不明显。ARIA Live 区域填补了这个空白，并提供了一种以编程方式显现动态内容更改的方法，这种方式可以由残疾辅助技术提供提示。 --- -备注： 辅助技术将播报实时区域内容的动态变化。 必须首先显示活动区域（通常是空的），以便浏览器和辅助技术可以知道它。 然后宣布任何后续更改。
+> **备注：** 辅助技术将播报实时区域内容的动态变化。 必须首先显示活动区域（通常是空的），以便浏览器和辅助技术可以知道它。 然后宣布任何后续更改。 +> +> 在页面加载时的初始标记中简单地添加一个 `aria-live` 属性或者一个特殊的活动区域角色 ( `role` ) (例如 `role="alert"`) 将不会起作用。 +> +> 向文档中动态添加一个包含 `aria-live` 属性的元素或者特殊的角色 ( `role` ) 也不会导致辅助技术工具的任何播报（在那个时间点，浏览器/辅助技术工具还没有检测到活动区域） 所以你不能监控它的变化)。 +> +> 总是确保实时区域首先出现在文档中，然后再动态添加/更改任何内容。 +> +> 只要在更改发生之前添加属性，就可以在要宣布更改的元素上包含 `aria-live` 属性或专门的活动区域角色（例如`role =“ alert”`）——在原始标记中或动态地使用 JavaScript。 -在页面加载时的初始标记中简单地添加一个
+## 简单的活动区域 -aria-live属性或者一个特殊的活动区域角色 (role) (例如role="alert") 将不会起作用。向文档中动态添加一个包含
+在不重新加载页面的情况下更新的动态内容通常是区域或窗口小部件。 非交互式的简单内容更改应标记为实时区域。 以下是每个相关的 ARIA 活动区域属性的列表，并带有说明。 -aria-live属性的元素或者特殊的角色 (role) 也不会导致辅助技术工具的任何播报（在那个时间点，浏览器/辅助技术工具还没有检测到活动区域） 所以你不能监控它的变化)。总是确保实时区域首先出现在文档中，然后再动态添加/更改任何内容。
+1. **`aria-live`**: `aria-live=POLITENESS_SETTING` 被用来设置屏幕阅读器对待活动区域更新的优先级 - 可能的设置：`off`, `polite` or `assertive` 。默认设置是 `off` 。这个设置是到目前为止最重要的。 +2. **`aria-controls`**: `aria-controls=[IDLIST]` 被用来将控制动作与它控制的区域相关联。区域就像`div` 里面的 `id` 被鉴别；多区域可以被一个带空格的控制动作关联，例如： `aria-controls="myRegionID1 myRegionsID2"` 。 -只要在更改发生之前添加属性，就可以在要宣布更改的元素上包含
-aria-live属性或专门的活动区域角色（例如role =“ alert”）——在原始标记中或动态地使用 JavaScript。简单的活动区域
- -在不重新加载页面的情况下更新的动态内容通常是区域或窗口小部件。 非交互式的简单内容更改应标记为实时区域。 以下是每个相关的 ARIA 活动区域属性的列表，并带有说明。
- --
+正常来说，只有 `aria-live="polite"` 被使用。任何对用户来说很重要但又不至于令人讨厌的更新的区域都应该被设置此属性。 每当用户空闲时，屏幕阅读器都会说出更改。 -- -
aria-live:aria-live=POLITENESS_SETTING被用来设置屏幕阅读器对待活动区域更新的优先级 - 可能的设置：off,politeorassertive。默认设置是off。这个设置是到目前为止最重要的。- -
-+ > **警告：** 尚不知道在当前的辅助技术工具中是否实现了实时区域的 ARIA 控制方面。需要研究。 -
aria-controls:aria-controls=[IDLIST]被用来将控制动作与它控制的区域相关联。区域就像div里面的id被鉴别；多区域可以被一个带空格的控制动作关联，例如：aria-controls="myRegionID1 myRegionsID2"。-警告： 尚不知道在当前的辅助技术工具中是否实现了实时区域的 ARIA 控制方面。需要研究。
正常来说，只有
+对于不重要的区域或由于快速更新或其他原因而烦人的区域，请使用 `aria-live="off"` 将其静音。 -aria-live="polite"被使用。任何对用户来说很重要但又不至于令人讨厌的更新的区域都应该被设置此属性。 每当用户空闲时，屏幕阅读器都会说出更改。对于不重要的区域或由于快速更新或其他原因而烦人的区域，请使用
+### 让下拉框更新有用的屏幕信息 -aria-live="off"将其静音。让下拉框更新有用的屏幕信息
+一个专门提供有关行星信息的网站提供了一个下拉框。 从下拉列表中选择一个行星时，页面上的区域会更新有关所选行星的信息。 -一个专门提供有关行星信息的网站提供了一个下拉框。 从下拉列表中选择一个行星时，页面上的区域会更新有关所选行星的信息。
+#### HTML -HTML
+```html + -<fieldset> - <legend>Planet information</legend> - <label for="planetsSelect">Planet:</label> - <select id="planetsSelect" aria-controls="planetInfo"> - <option value="">Select a planet…</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> -No planet selected
+Select a planet to view its description
+Information courtesy Wikipedia
+``` -JavaScript
+#### JavaScript -const PLANETS_INFO = { +```js +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.' @@ -100,125 +96,92 @@ function renderPlanetInfo(planet) { const renderPlanetInfoButton = document.querySelector('#renderPlanetInfoButton'); -renderPlanetInfoButton.addEventListener('click', event => { +renderPlanetInfoButton.addEventListener('click', event => { const planetsSelect = document.querySelector('#planetsSelect'); const selectedPlanet = planetsSelect.options[planetsSelect.selectedIndex].value; renderPlanetInfo(selectedPlanet); }); -- -{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}}
- -当用户选择一个新的行星时，活动区域的信息会被播报。因为这个活动区域有
- -aria-live="polite"属性，屏幕阅读器将会等待用户暂停后再播报更新。这样的话，在列表中向下滑动并选择其他星球将不会在实时区域中播报更新。 仅会针对最终选择的星球播报实时区域的更新。这是 Mac 上 VoiceOver 的屏幕截图，播报对实时区域的更新（通过字幕）：
- -更好的专业活动区域角色
- -在以下众所周知的预定义情况下，最好使用提供的特定“活动区域角色”：
- -- -
- -- - - -角色 -描述 -兼容性提示 -- -日志 -对话、错误、游戏或者其他类型的日志 -为最大化兼容性，当你使用这个角色时，请加入额外的 -aria-live="polite"参数。- -状态 -一个状态栏或者屏幕上提供持续更新某种状态的区域。屏幕阅读器用户有一个特殊的命令用来读取当前的状态。 -为最大化兼容性，当你使用这个角色时，请加入额外的 -aria-live="polite"参数。- -警告 -在屏幕上闪烁的错误或警告信息。警报对于向用户发出客户端验证通知特别重要。（待定：带有 ARIA 信息的 ARIA 表单教程链接） -为最大化兼容性，当你使用这个角色时，请加入额外的 -aria-live="assertive"参数。但是，同时添加aria-live和role="alert"会导致在 iOS 平台上出现 VoiceOver 的双重播报问题。- -进度条 -小部件和活动区域之间的混合体。 将此参数与 -aria-valuemin，aria-valuenow和aria-valuemax结合使用。（待定：请在此处添加更多信息）。- - -选框 -用于滚动文本，例如股票行情自动收录器。 -- - - -计时器 -或任何类型的计时器或时钟，例如倒数计时器或秒表读数。 -- 高级活动区域
- -（待定：有关操作系统 / 浏览器 / 辅助技术工具组合对单个属性的支持的更详细的信息）
- -JAWS 10.0 版中已添加对实时区域的常规支持。 Windows Eyes 从 8.0 版开始支持“在 Microsoft Internet Explorer 和 Mozilla Firefox 的浏览模式之外使用”的实时区域。 NVDA 早在 2008 年就为 Mozilla Firefox 添加了对实时区域的一些基本支持，并在 2010 年和 2014 年进行了改进。2015 年，还为 Internet Explorer（MSHTML）添加了基本支持。
- -Paciello Group 有一些与活动区域支持状态有关的信息 (2014) ，Paul J. Adam 特别研究了 对于
- -Aria-Atomic与Aria-Relevant的支持。-
- -- -
aria-atomic:aria-atomic=BOOLEAN被用来设置屏幕阅读器是否应该总是将活动区域整个播报，即使区域中只有一部分内容改变。可能的值为false或者true。默认值为false。- -
aria-relevant：aria-relevant=[LIST_OF_CHANGES]被用来设置哪些类型的改变与活动区域有关。可能的值由以下的一个或者更多组成：additions,removals,text,all。 默认值是additions text。- -
aria-labelledby:aria-labelledby=[IDLIST]被用来将一个区域与其标签关联起来，与 aria-control 类似，但将标签与区域关联。标签标识符间用空格隔开。- -
aria-describedby:aria-describedby=[IDLIST]被用来将一个区域与其描述关联起来，与 aria-control 类似，但将标签与描述关联。描述标识符间用空格隔开。高级用例: 时钟
- -为了举例说明
- -aria-atomic，请考虑一个带有简单时钟的站点，其中显示了小时和分钟。 时钟每分钟更新一次，而新的剩余时间仅会覆盖当前内容。<div id="clock" role="timer" aria-live="polite"></div> -- -/* basic JavaScript to update the clock */ +``` + +{{EmbedLiveSample('Dropdown_box_updates_useful_onscreen_information', '', 350)}} + +当用户选择一个新的行星时，活动区域的信息会被播报。因为这个活动区域有 `aria-live="polite"` 属性，屏幕阅读器将会等待用户暂停后再播报更新。这样的话，在列表中向下滑动并选择其他星球将不会在实时区域中播报更新。 仅会针对最终选择的星球播报实时区域的更新。 + +这是 Mac 上 VoiceOver 的屏幕截图，播报对实时区域的更新（通过字幕）： + +## 更好的专业活动区域角色 + +在以下众所周知的预定义情况下，最好使用提供的特定“活动区域角色”： + +| 角色 | 描述 | 兼容性提示 | +| ------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 日志 | 对话、错误、游戏或者其他类型的日志 | 为最大化兼容性，当你使用这个角色时，请加入额外的`aria-live="polite"` 参数。 | +| 状态 | 一个状态栏或者屏幕上提供持续更新某种状态的区域。屏幕阅读器用户有一个特殊的命令用来读取当前的状态。 | 为最大化兼容性，当你使用这个角色时，请加入额外的`aria-live="polite"` 参数。 | +| 警告 | 在屏幕上闪烁的错误或警告信息。警报对于向用户发出客户端验证通知特别重要。（待定：带有 ARIA 信息的 ARIA 表单教程链接） | 为最大化兼容性，当你使用这个角色时，请加入额外的`aria-live="assertive"` 参数。但是，同时添加 `aria-live` 和 `role="alert"` 会导致在 iOS 平台上出现 VoiceOver 的双重播报问题。 | +| 进度条 | 小部件和活动区域之间的混合体。 将此参数与 `aria-valuemin` ， `aria-valuenow` 和`aria-valuemax` 结合使用。（_待定_：请在此处添加更多信息）。 | | +| 选框 | 用于滚动文本，例如股票行情自动收录器。 | | +| 计时器 | 或任何类型的计时器或时钟，例如倒数计时器或秒表读数。 | | + +## 高级活动区域 + +（_待定_：有关操作系统 / 浏览器 / 辅助技术工具组合对单个属性的支持的更详细的信息） + +JAWS 10.0 版中已添加对实时区域的常规支持。 Windows Eyes 从 8.0 版开始支持“在 Microsoft Internet Explorer 和 Mozilla Firefox 的浏览模式之外使用”的实时区域。 NVDA 早在 2008 年就为 Mozilla Firefox 添加了对实时区域的一些基本支持，并在 2010 年和 2014 年进行了改进。2015 年，还为 Internet Explorer（MSHTML）添加了基本支持。 + +Paciello Group 有一些[与活动区域支持状态有关的信息 ](https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/)(2014) ，Paul J. Adam 特别研究了[ 对于 `Aria-Atomic `与 `Aria-Relevant` 的支持](http://pauljadam.com/demos/aria-atomic-relevant.html)。 + +1. **`aria-atomic`**: `aria-atomic=BOOLEAN` 被用来设置屏幕阅读器是否应该总是将活动区域整个播报，即使区域中只有一部分内容改变。可能的值为 `false` 或者 `true`。默认值为 `false`。 +2. [**`aria-relevant`**](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute)：`aria-relevant=[LIST_OF_CHANGES]` 被用来设置哪些类型的改变与活动区域有关。可能的值由以下的一个或者更多组成：`additions`, `removals`, `text`, `all` 。 默认值是 `additions text`。 +3. **`aria-labelledby`** : `aria-labelledby=[IDLIST]` 被用来将一个区域与其标签关联起来，与 aria-control 类似，但将标签与区域关联。标签标识符间用空格隔开。 +4. **`aria-describedby`** : `aria-describedby=[IDLIST]` 被用来将一个区域与其描述关联起来，与 aria-control 类似，但将标签与描述关联。描述标识符间用空格隔开。 + +### 高级用例: 时钟 + +为了举例说明 `aria-atomic` ，请考虑一个带有简单时钟的站点，其中显示了小时和分钟。 时钟每分钟更新一次，而新的剩余时间仅会覆盖当前内容。 + +```html + +``` + +```js +/* 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); -+``` -该函数第一次执行时，将播报所添加字符串的全部。 在随后的调用中，将仅播报内容与先前内容相比已更改的部分。 例如，当时钟从“ 17:33”更改为“ 17:34”时，辅助技术工具将仅播报“ 4”，这对用户不是很有用。
+该函数第一次执行时，将播报所添加字符串的全部。 在随后的调用中，将仅播报内容与先前内容相比已更改的部分。 例如，当时钟从“ 17:33”更改为“ 17:34”时，辅助技术工具将仅播报“ 4”，这对用户不是很有用。 -解决此问题的一种方法是，首先清除活动区域的内容，然后注入新内容。 但是，有时这可能不可靠，因为这取决于这两个更新的确切时间。
+解决此问题的一种方法是，首先清除活动区域的内容，然后注入新内容。 但是，有时这可能不可靠，因为这取决于这两个更新的确切时间。 -+`aria-atomic="true"` 确保每次更新实时区域时，全部内容都会被完整播报 (例如 "时间: 17:34"). -
aria-atomic="true"确保每次更新实时区域时，全部内容都会被完整播报 (例如 "时间: 17:34").<div id="clock" role="timer" aria-live="polite" aria-atomic="true"></div> -+```html + +``` --+> **备注：** 正如我们观察到的那样，重新设置/更新 innerHTML 会导致整个文本被重新播报，无论你是否设置 `aria-atomic="true"` ，所以以上的时钟示例并不能像预期那样地工作。 -备注： 正如我们观察到的那样，重新设置/更新 innerHTML 会导致整个文本被重新播报，无论你是否设置
-aria-atomic="true"，所以以上的时钟示例并不能像预期那样地工作。一个简单的年份控件的工作示例，可以帮助您更好地理解：
+一个简单的年份控件的工作示例，可以帮助您更好地理解： -<div id="date-input"> - <label>Year: - <input type="text" id="year" value="1990" onblur="change(event)"/> - </label> -</div> +```html ++ +-<div id="date-output" aria-live="polite"> +The set year is: - <span id="year-output">1990</span> -</div> - - + 1990 ++``` -function change(event) { +```js +function change(event) { var yearOut = document.getElementById("year-output"); switch (event.target.id) { case "year": @@ -227,33 +190,29 @@ setInterval(function() { default: return; } -};- - +}; +``` -如果没有
+如果没有 `aria-atomic="true"` ，屏幕阅读器只会播报"年"的数值的改变。 -aria-atomic="true"，屏幕阅读器只会播报"年"的数值的改变。如果有
+如果有 `aria-atomic-="true"` ，屏幕阅读器会播报"设置的年为：_改变的值_"。 -aria-atomic-="true"，屏幕阅读器会播报"设置的年为：改变的值"。高级用例：名册
+### 高级用例：名册 -一个聊天站点想要显示当前登录用户的列表。列表将动态反映用户的登录和注销状态的用户（无需重新加载页面）。
+一个聊天站点想要显示当前登录用户的列表。列表将动态反映用户的登录和注销状态的用户（无需重新加载页面）。 -<ul id="roster" aria-live="polite" aria-relevant="additions removals"> - <!-- use JavaScript to add remove users here--> -</ul> -+```html ++ +
+``` -ARIA 活动属性的细分：
+ARIA 活动属性的细分： --
+- `aria-live="polite"` 指示屏幕阅读器应该等到用户空闲后再播报更新。这是最常用的值，因为用 `“assertive”` 值会打扰用户，打断他们的操作流程。 +- `aria-atomic` 没有设置 (默认为 `false` ) ，这样就只能说出添加或删除的用户，而不是整个名单。 +- `aria-relevant="additions removals"` 确保在在线名册中添加用户与移除用户的时候都会被播报。 -- -
aria-live="polite"指示屏幕阅读器应该等到用户空闲后再播报更新。这是最常用的值，因为用“assertive”值会打扰用户，打断他们的操作流程。- -
aria-atomic没有设置 (默认为false) ，这样就只能说出添加或删除的用户，而不是整个名单。- -
aria-relevant="additions removals"确保在在线名册中添加用户与移除用户的时候都会被播报。参考
+## 参考 --
+- [ARIA 角色](/en-US/docs/Web/Accessibility/ARIA/Roles) diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/index.md b/files/zh-cn/web/accessibility/aria/aria_techniques/index.md index 189126350aea0b..87bfe2ee7c3802 100644 --- a/files/zh-cn/web/accessibility/aria/aria_techniques/index.md +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/index.md @@ -1,214 +1,169 @@ --- -title: '使用 ARIA：角色、状态和属性' +title: 使用 ARIA：角色、状态和属性 slug: Web/Accessibility/ARIA/ARIA_Techniques tags: -- ARIA -- 可访问性 -- 无障碍 -- Overview -- Reference + - ARIA + - 可访问性 + - 无障碍 + - Overview + - Reference translation_of: Web/Accessibility/ARIA/ARIA_Techniques --- - -- ARIA 角色
-ARIA 定义了可以应用于元素的语义，这些语义分为 roles（定义一种用户界面元素）、states 和 properties，这些都是角色所支持的。作者必须在元素的生命周期中为其分配一个 ARIA 角色和适当的状态和属性，除非该元素已经具有适当的 ARIA 语义（通过使用适当的 HTML 元素）。添加 ARIA 语义只会向浏览器的可访问性 API 公开额外信息，而不会影响页面的 DOM。
- -角色
- -组件角色
- -- -- -复合角色
- -下面的技术描述了每个复合角色及其必需和可选的子角色。
- -- -- -文档结构角色
- -- -- -具有里程碑意义的角色
- --- --
-- banner
-- complementary
-- contentinfo
-- form
-- main
-- navigation
-- region
-- search
-实时区域角色
- - - -窗口角色
- --- --
-- alertdialog
-- dialog
-状态和属性
- -组件属性
- --- --
-- aria-autocomplete
-- aria-checked
-- aria-current
-- aria-disabled
-- aria-errormessage
-- aria-expanded
-- aria-haspopup
-- aria-hidden
-- aria-invalid
-- aria-label
-- aria-level
-- aria-modal
-- aria-multiline
-- aria-multiselectable
-- aria-orientation
-- aria-placeholder
-- aria-pressed
-- aria-readonly
-- aria-required
-- aria-selected
-- aria-sort
-- aria-valuemax
-- aria-valuemin
-- aria-valuenow
-- aria-valuetext
-实时区域属性
- --- --
-- aria-live
-- aria-relevant
-- aria-atomic
-- aria-busy
-拖放属性
- --- --
-- aria-dropeffect
-- aria-dragged
-关系属性
- --- --
-- aria-activedescendant
-- aria-colcount
-- aria-colindex
-- aria-colspan
-- aria-controls
-- aria-describedby
-- aria-details
-- aria-errormessage
-- aria-flowto
-- aria-labelledby
-- aria-owns
-- aria-posinset
-- aria-rowcount
-- aria-rowindex
-- aria-rowspan
-- aria-setsize
-MicrosoftEdge 特定的属性
- --+ARIA 定义了可以应用于元素的语义，这些语义分为 **roles**（定义一种用户界面元素）、**states** 和 **properties**，这些都是角色所支持的。作者必须在元素的生命周期中为其分配一个 ARIA 角色和适当的状态和属性，除非该元素已经具有适当的 ARIA 语义（通过使用适当的 HTML 元素）。添加 ARIA 语义只会向浏览器的可访问性 API 公开额外信息，而不会影响页面的 DOM。 + +## 角色 + +### 组件角色 + +- [button](/zh-CN/docs/Web/Accessibility/ARIA/Roles/button_role) +- [checkbox](/zh-CN/docs/Web/Accessibility/ARIA/Roles/checkbox_role) +- [gridcell](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role) +- [link](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role) +- menuitem +- menuitemcheckbox +- menuitemradio +- option +- [progressbar](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role) +- [radio](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role) +- scrollbar +- searchbox +- separator (when focusable) +- [slider](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role) +- spinbutton +- [switch](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Switch_role) +- [tab](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role) +- [tabpanel](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role) +- [textbox](/zh-CN/docs/Web/Accessibility/ARIA/Roles/textbox_role) +- treeitem + +### 复合角色 + +下面的技术描述了每个复合角色及其必需和可选的子角色。 + +- combobox +- [grid](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Grid_Role) (包含 [row](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role), [gridcell](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Gridcell_role), rowheader, columnheader) +- [listbox](/zh-CN/docs/Web/Accessibility/ARIA/Roles/listbox_role) (包含 option) +- menu +- menubar +- [radiogroup](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role) (参考 radio) +- tablist (包含 [tab](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tab_Role) 和 [tabpanel](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role)) +- tree +- treegrid + +### 文档结构角色 + +- [application](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Application_Role) +- [article](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Article_Role) +- [cell](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Cell_Role) +- columnheader +- definition +- directory +- [document](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Document_Role) +- feed +- [figure](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Figure_Role) +- [group](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role) +- [heading](/zh-CN/docs/Web/Accessibility/ARIA/Roles/heading_role) +- [img](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Role_Img) +- [list](/zh-CN/docs/Web/Accessibility/ARIA/Roles/List_role) +- [listitem](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Listitem_role) +- math +- none +- note +- [presentation](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) +- [row](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Row_Role) +- [rowgroup](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role) +- rowheader +- separator +- [table](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Table_Role) +- term +- [toolbar](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role) +- tooltip + +### 具有里程碑意义的角色 + +- [banner](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Banner_role) +- [complementary](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Complementary_role) +- [contentinfo](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role) +- [form](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [main](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Main_role) +- [navigation](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Navigation_Role) +- [region](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Region_role) +- [search](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Search_role) + +### 实时区域角色 + +- [alert](/zh-CN/docs/Web/Accessibility/ARIA/Roles/Alert_Role) +- [log](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role) +- marquee +- [status](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role) +- [timer](/zh-CN/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role) + +### 窗口角色 + +- [alertdialog](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role) +- [dialog](/zh-CN/docs/Web/Accessibility/ARIA/Roles/dialog_role) + +## 状态和属性 + +### 组件属性 + +- aria-autocomplete +- aria-checked +- aria-current +- aria-disabled +- aria-errormessage +- aria-expanded +- aria-haspopup +- aria-hidden +- [aria-invalid](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute) +- [aria-label](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) +- aria-level +- aria-modal +- aria-multiline +- aria-multiselectable +- [aria-orientation](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute) +- aria-placeholder +- aria-pressed +- aria-readonly +- [aria-required](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute) +- aria-selected +- aria-sort +- [aria-valuemax](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) +- [aria-valuemin](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) +- [aria-valuenow](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute) +- [aria-valuetext](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) + +### 实时区域属性 + +- aria-live +- [aria-relevant](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute) +- aria-atomic +- aria-busy + +### 拖放属性 + +- aria-dropeffect +- aria-dragged + +### 关系属性 + +- [aria-activedescendant](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute) +- aria-colcount +- aria-colindex +- aria-colspan +- aria-controls +- [aria-describedby](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) +- [aria-details](/zh-CN/docs/Web/Accessibility/ARIA/Annotations#associating_annotated_elements_with_their_details) +- aria-errormessage +- aria-flowto +- [aria-labelledby](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) +- aria-owns +- aria-posinset +- aria-rowcount +- aria-rowindex +- aria-rowspan +- aria-setsize + +### MicrosoftEdge 特定的属性 + +- [x-ms-aria-flowfrom](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Techniques/x-ms-aria-flowfrom) {{Non-standard_Inline}} diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md index 91f9a3762a6ca0..4975a2b8b227b8 100644 --- a/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-hidden/index.md @@ -12,82 +12,68 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute original_slug: Web/Accessibility/ARIA/ARIA_Techniques/使用 aria-hidden 属性 --- --
-- x-ms-aria-flowfrom {{Non-standard_Inline}}
-本文用来说明如何使用 aria-hidden 属性。aria-hidden 属性可以用来控制一系列可访问 API 中的非交互内容的显示或隐藏。
+本文用来说明如何使用 aria-hidden 属性。aria-hidden 属性可以用来控制一系列可访问 API 中的非交互内容的显示或隐藏。 -描述
+## 描述 --+如果父元素带有 `aria-hidden="true"` ，那么即使使用 `aria-hidden="false"` 也无法将该元素显示出来。 -把
+把 `aria-hidden="true"` 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验： -aria-hidden="true"加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：-
+- 纯装饰性的内容，如图标、图片 +- 重复的内容，如重复的文本 +- 屏幕外或被折叠的内容，如菜单 -- 纯装饰性的内容，如图标、图片
-- 重复的内容，如重复的文本
-- 屏幕外或被折叠的内容，如菜单
-根据可访问性的第四条规则，
+根据[可访问性的第四条规则](https://www.w3.org/TR/using-aria/#fourth)，`aria-hidden="true"` 不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。 -aria-hidden="true"不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。如果父元素带有
-aria-hidden="true"，那么即使使用aria-hidden="false"也无法将该元素显示出来。-+> **警告：** WAI-ARIA Authoring Practices 1.1 提示 `aria-hidden="false"` 在现阶段 [各个浏览器中表现不同](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden). -警告： WAI-ARIA Authoring Practices 1.1 提示
-aria-hidden="false"在现阶段 各个浏览器中表现不同.比较
+### 比较 `aria-hidden="true"`， ` role="presentation" 和 ``role="none"` -aria-hidden="true"，role="presentation" 和role="none"表面上，
+表面上，`aria-hidden="true"`，`role="presentation"`，和`role="none"` 很相似，因为这三者都有以下特性： -aria-hidden="true"，role="presentation"，和role="none"很相似，因为这三者都有以下特性：-
+- 根据辅助即使隐藏页面内容 +- 无法在可聚焦元素上使用 +- 无法在可互动元素的父级元素上使用 -- 根据辅助即使隐藏页面内容
-- 无法在可聚焦元素上使用
-- 无法在可互动元素的父级元素上使用
-尽管有上面这些相同点，但是各个属性的意图是不同的。
+尽管有上面这些相同点，但是各个属性的意图是不同的。 --
+- `aria-hidden="true"` 会把整个元素从可访问性 API 中移除 +- `role="presentation"` 和`role="none"` 会将元素从语义上移除，仍然会将元素暴露给辅助技术。 -- -
aria-hidden="true"会把整个元素从可访问性 API 中移除- -
role="presentation"和role="none"会将元素从语义上移除，仍然会将元素暴露给辅助技术。可选值
+### 可选值 --
+- `false` + - : （默认）元素会暴露给可访问性 API。 +- `true` + - : 元素不会暴露给可访问性 API。 +- `undefined` + - : （默认）客户端决定元素是否暴露给可访问性 API。 -- -
false- （默认）元素会暴露给可访问性 API。
-- -
true- 元素不会暴露给可访问性 API。
-- -
undefined- （默认）客户端决定元素是否暴露给可访问性 API。
-示例
+## 示例 -<i class="icon"+```html + -aria-hidden="true" />-无障碍问题
+``` -最佳实践
+## 无障碍问题 -+## 最佳实践 -
aria-hidden="true"在以下场景不应该被使用：-
+`aria-hidden="true"` 在以下场景不应该被使用： -- HTML 的
-hidden属性被设置了- 祖先元素被
-display: none属性设置成不显示状态- 祖先元素被
-visibility: hidden属性设置成不显示状态在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加
+- HTML 的`hidden`属性被设置了 +- 祖先元素被`display: none`属性设置成不显示状态 +- 祖先元素被`visibility: hidden`属性设置成不显示状态 -aria-hidden="true"属性。规范
+在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加`aria-hidden="true"`属性。 + +## 规范 {{Specifications}} -另见
+## 另见 --
+- [使用展示角色](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role) +- [role="none"](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_none_role) diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md index a68f82f0ab43cd..b95114b0fed7fa 100644 --- a/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-label/index.md @@ -7,49 +7,44 @@ tags: - 可访问性 translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute --- -- 使用展示角色
-- role="none"
-aria-label 属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加 label（如果被描述元素存在真实的描述元素，可使用 aria-labelledby 属性作为来绑定描述元素和被描述元素来代替）。
+aria-label 属性用来给当前元素加上的标签描述，接受字符串作为参数。是用不可视的方式给元素加 label（如果被描述元素存在真实的描述元素，可使用 [aria-labelledby](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) 属性作为来绑定描述元素和被描述元素来代替）。 -aria-label 属性可以用在任何典型的 HTML 元素中，并不需要配合特定的 ARIA role 才能使用。
+aria-label 属性可以用在任何典型的 HTML 元素中，并不需要配合特定的 ARIA role 才能使用。 -Value
+### Value -string
+string -对于用户代理和辅助技术的可能影响
+### 对于用户代理和辅助技术的可能影响 -+> **备注：** 由于辅助技术处理这一技术的差异导致选项信息可能不同。以上所提供的信息只是其中可能的一种，而非一般情况。 -备注： 由于辅助技术处理这一技术的差异导致选项信息可能不同。以上所提供的信息只是其中可能的一种，而非一般情况。
示例
+## 示例 --+在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道 X 是什么意思，所以需要 aria-label 标签来为辅助设备提供相应的标识来告诉它这个 button 是 close 的作用。 -示例 1：多标签（Multiple Labels）
+#### 示例 1：多标签（Multiple Labels） -在下面的示例中，按钮（button）元素被定义为一个关闭（close）按钮，按钮中间有一个“X”字符。辅助软件并不能知道 X 是什么意思，所以需要 aria-label 标签来为辅助设备提供相应的标识来告诉它这个 button 是 close 的作用。
-<button aria-label="Close" onclick="myDialog.close()">X</button> -+```html + +``` -说明
+### 说明 -最常见的对于标签的可访问性 API 就是可访问的 name 属性。
+最常见的对于标签的可访问性 API 就是可访问的 name 属性。 -ARIA roles 的使用
+### ARIA roles 的使用 -基本标记中的全部元素。
+基本标记中的全部元素。 -ARIA 相关技术
+### ARIA 相关技术 - +- [Using the aria-labelledby attribute](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) -兼容性
+### 兼容性 -有待讨论：为通常的 UA 和 AT 产品组合提供支持信息。
+有待讨论：为通常的 UA 和 AT 产品组合提供支持信息。 -额外资源
+### 额外资源 - +- [WAI-ARIA specification for aria-label](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label) diff --git a/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md b/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md index ced8a98cf742ad..484acfa11efff9 100644 --- a/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md +++ b/files/zh-cn/web/accessibility/aria/attributes/aria-labelledby/index.md @@ -3,141 +3,130 @@ title: Using the aria-labelledby attribute slug: Web/Accessibility/ARIA/Attributes/aria-labelledby translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute --- -描述
+### **描述** -+[`aria-labelledby`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby)属性用来表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系。使用诸如屏幕阅读器等辅助技术的用户通常使用 tabbing 在页面的不同区域间进行导航。如果一个输入元素、控件或控件组没有被分配一个 label 标签，那么屏幕阅读器就无法对其进行阅读。 -
aria-labelledby属性用来表明某些元素的 id 是某一对象的标签。它被用来确定控件或控件组与它们标签之间的联系。使用诸如屏幕阅读器等辅助技术的用户通常使用 tabbing 在页面的不同区域间进行导航。如果一个输入元素、控件或控件组没有被分配一个 label 标签，那么屏幕阅读器就无法对其进行阅读。+`aria-labelledby 属性与`[aria-describedby](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)属性非常相似：用一个标签描述某一对象的本质，可能会提供一些用户需要了解的额外信息。 -
aria-labelledby 属性与aria-describedby属性非常相似：用一个标签描述某一对象的本质，可能会提供一些用户需要了解的额外信息。+`aria-labelledby 属性并不仅仅用于表单元素，也可以用来分配静态文本给控件、元素组、面板组以及包含标题和定义等内容的区域等。下方的示例将会展示如何针对这些情况运用这一属性的更多信息。` -
aria-labelledby 属性并不仅仅用于表单元素，也可以用来分配静态文本给控件、元素组、面板组以及包含标题和定义等内容的区域等。下方的示例将会展示如何针对这些情况运用这一属性的更多信息。+`aria-labelledby 属性可以与 HTML 元素 label 联合使用，用于提高对于不支持 ARIA 技术的用户代理的兼容性。` -
aria-labelledby 属性可以与 HTML 元素 label 联合使用，用于提高对于不支持 ARIA 技术的用户代理的兼容性。这一属性可以用于任何典型的 HTML 表单元素，不仅限于已分配 ARIA role 的元素。
+这一属性可以用于任何典型的 HTML 表单元素，不仅限于已分配 ARIA role 的元素。 -值 Value
+### 值 Value -一个以空格进行分割的元素 ID 列表。
+一个以空格进行分割的元素 ID 列表。 -对于用户代理和辅助技术的可能影响
+### 对于用户代理和辅助技术的可能影响 -当
+当` aria-labelledby 和``aria-label都被使用时 `, 用户代理在生成可访问的名称属性时将为`aria-labelledby 分配更高的优先级。` -aria-labelledby 和aria-label都被使用时, 用户代理在生成可访问的名称属性时将为aria-labelledby 分配更高的优先级。注意： 由于不同的辅助技术对于这一技术的处理可能不同，以上提供的信息尽是诸多可能的一种，而非一般情况。
+**注意：** 由于不同的辅助技术对于这一技术的处理可能不同，以上提供的信息尽是诸多可能的一种，而非一般情况。 -示例
+### 示例 -示例 1: 多标签 Mutiple Labels
+#### 示例 1: 多标签 Mutiple Labels -在下面的示例中，每个输入域都被它自身的独立标签以及其所在组的标签进行了标识：
+在下面的示例中，每个输入域都被它自身的独立标签以及其所在组的标签进行了标识： -<div id="billing">Billing Address</div> ++Billing Address-<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> -++Name+ ++-Address+ +示例 2: 联结的标题和区域 Associating Headings With Regions
+#### 示例 2: 联结的标题和区域 Associating Headings With Regions -在下面的示例中，标题元素被与它们作为标题的内容联结在一起。注意，所参考的区域是包含标题元素的那个区域。
+在下面的示例中，标题元素被与它们作为标题的内容联结在一起。注意，所参考的区域是包含标题元素的那个区域。 -<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> -++-示例 3: 单选组 Radio Groups
+#### 示例 3: 单选组 Radio Groups -在下面的示例中，单选组radiogroup的容器通过一个 aria-labeledby 属性与他的的标签相联结：
+在下面的示例中，单选组[radiogroup](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radiogroup_role)的容器通过一个 aria-labeledby 属性与他的的标签相联结： -<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> -+My radio label++
-- Item #1
+- Item #2
+- Item #3
+示例 4: 对话框标签 Dialog Label
+#### 示例 4: 对话框标签 Dialog Label -在下面的示例中，标记对话框的标题元素通过 aria-labeledby 属性被引用
+在下面的示例中，标记对话框的标题元素通过 aria-labeledby 属性被引用 -<div role="dialog" aria-labelledby="dialogheader"> - <h2 id="dialogheader">Choose a File</h2> - ... Dialog contents -</div> -++-Choose a File
+ ... Dialog contents +示例 5: 内联定义 Inline Definition
+#### 示例 5: 内联定义 Inline Definition -在下面的示例中，某一事物的被一个叙述性的自然流所描述的定义与这一事物本身通过aria-labeledby属性相联结：
+在下面的示例中，某一事物的被一个叙述性的自然流所描述的定义与这一事物本身通过**aria-labeledby**属性相联结： -<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> -+The doctor explained it had been a placebo, or + an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder. +
-示例 6: 定义列表 Definition Lists
+#### 示例 6: 定义列表 Definition Lists -在下面的示例中，正式的定义列表中的定义与他们所定义的项目通过 aria-labeledby 属性相联结：
+在下面的示例中，正式的定义列表中的定义与他们所定义的项目通过 aria-labeledby 属性相联结： -<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> ++
-- anthema
+- a ban or curse solemnly pronounced by ecclesiastical authority + and accompanied by excommunication
+- a vigorous denunciation : cursor
- <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> +- homily
+- a usually short sermon
+- a lecture or discourse on or of a moral theme
-</dl> - +示例 7: 菜单
+#### 示例 7: 菜单 -在下面的示例中，一个popup menu通过 aria-labeledby 属性与其标签相联结：
+在下面的示例中，一个[popup menu](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-haspopup_attribute)通过 aria-labeledby 属性与其标签相联结： -<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> ++- [Using the aria-label attribute](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) +- [Using the aria-describedby attribute](/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute) -+-File++... - </div> - ... -</div> - +Open+Save+Save as ...+ ... +注意
+### 注意 -The most common accessibility API mapping for a label is the accessible name property
+The most common _accessibility API_ mapping for a label is the _accessible name_ property -Used by ARIA roles
+### Used by ARIA roles -all elements of the base markup
+all elements of the base markup -Related ARIA techniques
+### Related ARIA techniques -Compatibility
+### Compatibility -TBD: Add support information for common UA and AT product combinations
+TBD: Add support information for common UA and AT product combinations -Additional resources
+### Additional resources - +- [WAI-ARIA specification for aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) diff --git a/files/zh-cn/web/accessibility/aria/forms/alerts/index.md b/files/zh-cn/web/accessibility/aria/forms/alerts/index.md index 1ba6b38fab2ca8..c516a51352c823 100644 --- a/files/zh-cn/web/accessibility/aria/forms/alerts/index.md +++ b/files/zh-cn/web/accessibility/aria/forms/alerts/index.md @@ -3,51 +3,51 @@ title: Alerts slug: Web/Accessibility/ARIA/forms/alerts translation_of: Web/Accessibility/ARIA/forms/alerts --- -问题
- -您有一个表单（例如联系表单），您希望将一些可访问的错误检查放入其中。 常见问题的示例包括无效的电子邮件地址，或至少不包含名字或姓氏的名称字段。
- -表单
- -首先，请阅读有关
- -aria-requiredtechnique所需的技术（如果您尚未这样做的话），因为该技术会以此为基础进行扩展。这是一个示例表单：
- -<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> -- -检查有效性并通知用户
- -表单有效性检验由这几个步骤组成：
- --
- -- 检查电子邮件地址或输入的名称是否有效。 每个字段都有一组必须通过验证的标准。 为了简化此示例，我们将检查电子邮件地址是否包含“ @”符号，以及名称条目是否包含至少 1 个字符。
-- 如果不满足上述条件，则该字段的
-aria-invalid属性将被赋予“true”值。- 如果不符合条件，用户将被通过警报来通知。 我们将使用简单的 WAI-ARIA 小部件来进行通知，而不是使用 JavaScript 的“
-alert”功能。 这会通知用户错误，但允许他们继续修改表单而不会失去焦点（由 JavaScript 默认的“alert”功能中的“onblur”处理函数引起）。下面是一个能够被插入在结束“
- -head”标签上方的示例 JavaScript 代码<script type="application/javascript"> +## 问题 + +您有一个表单（例如联系表单），您希望将一些可访问的错误检查放入其中。 常见问题的示例包括无效的电子邮件地址，或至少不包含名字或姓氏的名称字段。 + +## 表单 + +首先，请阅读有关[`aria-required` technique](/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields)所需的技术（如果您尚未这样做的话），因为该技术会以此为基础进行扩展。 + +这是一个示例表单： + +```html ++``` + +## 检查有效性并通知用户 + +表单有效性检验由这几个步骤组成： + +1. 检查电子邮件地址或输入的名称是否有效。 每个字段都有一组必须通过验证的标准。 为了简化此示例，我们将检查电子邮件地址是否包含“ @”符号，以及名称条目是否包含至少 1 个字符。 +2. 如果不满足上述条件，则该字段的`aria-invalid`属性将被赋予“ `true`”值。 +3. 如果不符合条件，用户将被通过警报来通知。 我们将使用简单的 WAI-ARIA 小部件来进行通知，而不是使用 JavaScript 的“`alert`”功能。 这会通知用户错误，但允许他们继续修改表单而不会失去焦点（由 JavaScript 默认的“`alert`”功能中的“ `onblur`”处理函数引起）。 + +下面是一个能够被插入在结束“ `head`”标签上方的示例 JavaScript 代码 + +```js + +``` -+## `checkValidity` 函数 -
checkValidity函数JavaScript 中用于表单验证的主要方法是
+JavaScript 中用于表单验证的主要方法是`checkValidity`函数。 此方法采用三个参数：要验证的`输入`的 ID，要确保有效性的搜索项，以及要插入警报中的错误消息。 -checkValidity函数。 此方法采用三个参数：要验证的输入的 ID，要确保有效性的搜索项，以及要插入警报中的错误消息。要查看其是否有效，该函数将检查
+要查看其是否有效，该函数将检查`输入`的`indexOf`值是否大于`-1`。 如果在值内找不到搜索词的索引，则返回`-1`或更小的值。 -输入的indexOf值是否大于-1。 如果在值内找不到搜索词的索引，则返回-1或更小的值。如果无效，这个函数会执行这两个事情：
+如果无效，这个函数会执行这两个事情： --
+1. 它会把这个字段的`aria-invalid`属性设置为“`true`”，指示用户那里有无效的内容。 +2. 它会调用`addAlert`函数来使用给定的错误信息添加警告。 -- 它会把这个字段的
-aria-invalid属性设置为“true”，指示用户那里有无效的内容。- 它会调用
-addAlert函数来使用给定的错误信息添加警告。如果搜索词被找到，
+如果搜索词被找到，`aria-invalid`值会被重置为“`false`”。此外，所有剩余警告都将被删除。 -aria-invalid值会被重置为“false”。此外，所有剩余警告都将被删除。+## `addAlert` 函数 -
addAlert函数此功能首先删除所有旧警报。 该函数很简单：它查找 ID 为“
+此功能首先删除所有旧警报。 该函数很简单：它查找 ID 为“`alert`”的元素，如果找到，则将其从[文档对象模型](/zh-CN/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model)中删除。 -alert”的元素，如果找到，则将其从文档对象模型中删除。接下来，这个函数创建一个
+接下来，这个函数创建一个`div`元素来保存警告文本。 它得到了一个 “`alert`”的 ID.，并且它具有“`alert`”角色集。 这实际上是受 ARIA 启发的，即使它在属性名称中没有标明“aria”。 这是因为该角色基于[XHTML 角色属性模块](http://www.w3.org/TR/xhtml-role/)，为简单起见，该模块简单地移植到 HTML。 -div元素来保存警告文本。 它得到了一个 “alert”的 ID.，并且它具有“alert”角色集。 这实际上是受 ARIA 启发的，即使它在属性名称中没有标明“aria”。 这是因为该角色基于XHTML 角色属性模块，为简单起见，该模块简单地移植到 HTML。这些文字被加入这个
+这些文字被加入这个`div`元素，然后这个`div`元素被加入文档。 -div元素，然后这个div元素被加入文档。发生这种情况时，当此
+发生这种情况时，当此`div`出现时，Firefox 将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于 Firefox 中的提示栏，提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮，只是告诉我们出了什么问题。 -div出现时，Firefox 将向辅助技术触发“警报”事件。 大多数屏幕阅读器都会自动选择并说出来。 这类似于 Firefox 中的提示栏，提示您是否要保存密码。 我们刚刚创建的警报没有任何可按的按钮，只是告诉我们出了什么问题。修改“
+## 修改“`onblur`” 事件 -onblur” 事件现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入：
+现在剩下的就是添加事件处理程序。 我们需要为此更改电子邮件和名称的两个输入： -<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');"/> -+```html + +
+ +``` -测试示例
+**测试示例** -如果你在使用 Firefox 3 和一个当前支持的屏幕阅读器，试试看下面的操作：
+如果你在使用 Firefox 3 和一个当前支持的屏幕阅读器，试试看下面的操作： --
+1. 在姓名输入框中，只输入你的名。按下 Tab 键时，您会听到警告，提示您输入了无效的姓名。 然后，您可以向后移 Tab 键并更正错误。 +2. 输入不带“ @”符号的电子邮件地址。 跳出此字段时，您应该听到一条警告，提示您未输入有效的电子邮件地址。 -- 在姓名输入框中，只输入你的名。按下 Tab 键时，您会听到警告，提示您输入了无效的姓名。 然后，您可以向后移 Tab 键并更正错误。
-- 输入不带“ @”符号的电子邮件地址。 跳出此字段时，您应该听到一条警告，提示您未输入有效的电子邮件地址。
-在两种情况下，当将焦点返回到相关字段时，您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能，但是 JAWS 8 不支持，所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。
+在两种情况下，当将焦点返回到相关字段时，您的屏幕阅读器应该告诉您该字段无效。 JAWS 9 支持这个功能，但是 JAWS 8 不支持，所以这个功能不一定能够在所有版本的支持的屏幕阅读器中正常工作。 -您可能遇到的一些问题
+## 您可能遇到的一些问题 --
+- Q. 为什么在某些输入中同时在标签文本和“`aria-required`”属性中都添加了“`(required)`”？ + - : A. 如果这是一个实例中的表格，并且尚不支持 ARIA 的浏览器正在访问该网站，我们仍然希望表明这是必填字段。 +- Q. 为什么不将焦点自动设置回无效字段？ + - : A. 因为 Windows API 规范（可能还有其他规范）不允许这样做。 同样，让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。 -- Q. 为什么在某些输入中同时在标签文本和“
-aria-required”属性中都添加了“(required)”？ -- A. 如果这是一个实例中的表格，并且尚不支持 ARIA 的浏览器正在访问该网站，我们仍然希望表明这是必填字段。
-- Q. 为什么不将焦点自动设置回无效字段？
-- A. 因为 Windows API 规范（可能还有其他规范）不允许这样做。 同样，让焦点在没有实际用户交互的情况下过于频繁地跳动通常也不是一件好事。
-+> **警告：** TBD:让我们重新考虑一下 - 就个人而言，我认为如果不引起键盘陷阱，设置焦点可能会很好。 diff --git a/files/zh-cn/web/accessibility/aria/forms/index.md b/files/zh-cn/web/accessibility/aria/forms/index.md index a522dccd1d0ce6..7d208db6a4f619 100644 --- a/files/zh-cn/web/accessibility/aria/forms/index.md +++ b/files/zh-cn/web/accessibility/aria/forms/index.md @@ -3,14 +3,12 @@ title: Forms slug: Web/Accessibility/ARIA/forms translation_of: Web/Accessibility/ARIA/forms --- -警告： TBD:让我们重新考虑一下 - 就个人而言，我认为如果不引起键盘陷阱，设置焦点可能会很好。
The following pages provide various techniques for improving the accessibility of web forms:
+The following pages provide various techniques for improving the accessibility of web forms: -接下来的网页会为 web 表单技术的人提供一系列的知识：
+接下来的网页会为 web 表单技术的人提供一系列的知识： --
+- [Basic form hints](/en/Accessibility/ARIA/Basic_form_hints): Adding hints and descriptions for invalid or required fields +- [Alerts](/en/Accessibility/ARIA/forms/alerts): Using alerts to provide client-side validation error messages +- [Multi-part labels](/en/Accessibility/ARIA/forms/Multipart_labels): Enabling complex form labels with a control inside each label -- Basic form hints: Adding hints and descriptions for invalid or required fields
-- Alerts: Using alerts to provide client-side validation error messages
-- Multi-part labels: Enabling complex form labels with a control inside each label
-See also the Yahoo! article on form validation and ARIA, covering much of the same content.
+See also the [Yahoo! article on form validation and ARIA](http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html), covering much of the same content. diff --git a/files/zh-cn/web/accessibility/aria/index.md b/files/zh-cn/web/accessibility/aria/index.md index e64c2b1f055d75..ebdd8736a1afd9 100644 --- a/files/zh-cn/web/accessibility/aria/index.md +++ b/files/zh-cn/web/accessibility/aria/index.md @@ -8,25 +8,26 @@ tags: - HTML translation_of: Web/Accessibility/ARIA --- -ARIA (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。
+**ARIA** (Accessible Rich Internet Applications) 是一组属性，用于定义使残障人士更容易访问 Web 内容和 Web 应用程序（尤其是使用 JavaScript 开发的应用程序）的方法。 -它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。
+它补充了 HTML，以便在没有其他机制时可以将应用程序中常用的交互和小部件传递给辅助技术。例如，ARIA 支持 HTML4 中的可访问导航地标、JavaScript 小部件、表单提示和错误消息、实时内容更新等。 ---警告： 许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA。例如，原生元素具有内置的键盘可访问性、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模仿（等效）浏览器行为。
-这是进度条小部件的标记：
+> **警告：** 许多这些小部件后来被合并到 HTML5 中，如果存在这样的元素，**开发人员应该更喜欢使用正确语义的 HTML 元素而不是使用 ARIA**。例如，原生元素具有内置的[键盘可访问性](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets)、角色和状态。但是，如果您选择使用 ARIA，则您有责任在脚本中模仿（等效）浏览器行为。 + +这是进度条小部件的标记： -<div id="percent-loaded" role="progressbar" aria-valuenow="75" - aria-valuemin="0" aria-valuemax="100"> -</div> -+```html +++``` -这个进度条是使用 {{HTMLElement("div")}} 构建的，它没有任何意义。不幸的是，HTML 4 中没有更多语义标签可供开发人员使用，因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中，
+这个进度条是使用 {{HTMLElement("div")}} 构建的，它没有任何意义。不幸的是，HTML 4 中没有更多语义标签可供开发人员使用，因此我们需要包含 ARIA 角色和属性。这些是通过向元素添加属性来指定的。在这个例子中， `role="progressbar"` 属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。 `aria-valuemin` 和 `aria-valuemax` 属性指定进度条的最小值和最大值，`aria-valuenow` 描述进度条的当前状态和因此必须使用 JavaScript 保持更新。 -role="progressbar"属性通知浏览器这个元素实际上是一个 JavaScript 驱动的进度条小部件。aria-valuemin和aria-valuemax属性指定进度条的最小值和最大值，aria-valuenow描述进度条的当前状态和因此必须使用 JavaScript 保持更新。除了将它们直接放置在元素中之外，还可以将 ARIA 属性添加到元素中，并使用 JavaScript 代码动态更新，如下所示：
+除了将它们直接放置在元素中之外，还可以将 ARIA 属性添加到元素中，并使用 JavaScript 代码动态更新，如下所示： -// Find the progress bar <div> in the DOM. +```js +// Find the progress barin the DOM. var progressBar = document.getElementById("percent-loaded"); // Set its ARIA roles and states, @@ -39,79 +40,68 @@ progressBar.setAttribute("aria-valuemax", 100); // the value of the progress bar. function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); -} +} +``` --+> **备注：** 请注意，ARIA 是在 HTML4 之后发明的，因此无法在 HTML4 或其 XHTML 变体中进行验证。然而，它提供的可访问性收益远远超过任何技术无效性。 +> +> 在 HTML5 中，所有 ARIA 属性都经过验证。新的地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。 -备注： 请注意，ARIA 是在 HTML4 之后发明的，因此无法在 HTML4 或其 XHTML 变体中进行验证。然而，它提供的可访问性收益远远超过任何技术无效性。
- -在 HTML5 中，所有 ARIA 属性都经过验证。新的地标元素（{{HTMLElement("main")}}、{{HTMLElement("header")}}、{{HTMLElement("nav")}} 等）具有内置的 ARIA 角色，因此有无需复制它们。
-支持
+## 支持 -与任何其他 Web 技术一样，对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器，以及与之交互的辅助技术类型。此外，操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。
+与任何其他 Web 技术一样，对 ARIA 有不同程度的支持。支持基于所使用的操作系统和浏览器，以及与之交互的辅助技术类型。此外，操作系统、浏览器和辅助技术的版本也是影响因素。较旧的软件版本可能不支持某些 ARIA 角色、仅部分支持或误报其功能。 -同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件，因为害怕失去与他们的计算机和浏览器交互的能力。因此，尽可能对 使用语义化的 HTML 元素 很重要，因为语义 HTML 对辅助技术的支持要好得多。
+同样重要的是要承认一些依赖辅助技术的人不愿意升级他们的软件，因为害怕失去与他们的计算机和浏览器交互的能力。因此，尽可能对 [使用语义化的 HTML 元素](/zh-CN/docs/Learn/Accessibility/HTML) 很重要，因为语义 HTML 对辅助技术的支持要好得多。 -使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样，代理辅助技术解决方案不足以完全保证功能。
+使用实际辅助技术测试您编写的 ARIA 也很重要。就像浏览器模拟器和模拟器不是测试完全支持的有效解决方案一样，代理辅助技术解决方案不足以完全保证功能。 -教程
+## 教程 --
+- [ARIA 简介](/zh-CN/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets) + - : 快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 [ARIA intro by Gez Lemon](https://dev.opera.com/articles/view/introduction-to-wai-aria/)。 +- [Videos of screen readers using ARIA](https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/) + - : 查看来自网络的真实和简化示例，视频包括 ARIA “之前”和 ARIA“之后”。 +- [Using ARIA](https://w3c.github.io/using-aria/) + - : 开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。 -- ARIA 简介
-- 快速介绍如何使用 ARIA 访问动态内容。另请参阅 2008 年的经典 ARIA intro by Gez Lemon。
-- Videos of screen readers using ARIA
-- 查看来自网络的真实和简化示例，视频包括 ARIA “之前”和 ARIA“之后”。
-- Using ARIA
-- 开发人员实用指南。它建议在 HTML 元素上使用哪些 ARIA 属性。建议是基于实施的实际情况。
-简单的 ARIA 增强
+## 简单的 ARIA 增强 --
+- [Enhancing page navigation with ARIA landmarks](https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/) + - : 使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 [ARIA landmark implementation notes](https://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/) 和真实站点上的示例（截至 2011 年 7 月更新）。 +- [Improving form accessibility](/zh-CN/docs/Web/Accessibility/ARIA/forms) + - : ARIA 不仅适用于动态内容！了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。 -- Enhancing page navigation with ARIA landmarks
-- 使用 ARIA 地标改进屏幕阅读器用户的网页导航的一个很好的介绍。参考 ARIA landmark implementation notes 和真实站点上的示例（截至 2011 年 7 月更新）。
-- Improving form accessibility
-- ARIA 不仅适用于动态内容！了解如何使用附加 ARIA 属性提高 HTML 表单的可访问性。
-脚本小部件的 ARIA
+## 脚本小部件的 ARIA --
+- [编写可通过键盘导航的 JavaScript 小部件](/zh-CN/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets) + - : {{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些，则必须确保您的小部件可通过键盘访问。 +- [实时区域](/zh-CN/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) + - : 实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。 +- [Using ARIA Live Regions to announce content changes](https://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) + - : JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。 -- 编写可通过键盘导航的 JavaScript 小部件
-- {{HTMLElement("input")}}、{{HTMLElement("button")}} 等内置元素具有内置键盘辅助功能。如果您使用 {{HTMLElement("div")}} 和 ARIA 来“伪造”这些，则必须确保您的小部件可通过键盘访问。
-- 实时区域
-- 实时区域向屏幕阅读器提供有关如何处理页面内容更改的建议。
-- Using ARIA Live Regions to announce content changes
-- JAWS 屏幕阅读器软件制造商对实时区域的快速总结。带有 Firefox 的 NVDA 和带有 Safari 的 VoiceOver 也支持实时区域。
-参考文献
+## 参考文献 --
+- [ARIA Roles](/zh-CN/docs/Web/Accessibility/ARIA/Roles) + - : 参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。 -- ARIA Roles
-- 参考页面涵盖了 MDN 上讨论的所有 WAI-ARIA 角色。
-标准化工作
+## 标准化工作 --
+- [WAI-ARIA Specification](https://www.w3.org/TR/wai-aria-1.1/) + - : W3C 规范本身。 +- [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/) + - : 官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。 -- WAI-ARIA Specification
-- W3C 规范本身。
-- WAI-ARIA Authoring Practices
-- -
官方最佳实践记录了如何最好地对常见小部件和交互进行 ARIA 化。一个很好的资源。
视频
+## 视频 -以下演讲是了解 ARIA 的好方法：
+以下演讲是了解 ARIA 的好方法： -ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson
+[ARIA, Accessibility APIs and coding like you give a damn! – Léonie Watson](https://www.youtube.com/watch?v=qdB8SRhqvFc) -提交错误
+## 提交错误 -在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。
+[在浏览器、屏幕阅读器和 JavaScript 库上提交 ARIA 错误。](/zh-CN/docs/Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs) -相关话题
+## 相关话题 -Accessibility, AJAX, JavaScript
+[Accessibility](/zh-CN/docs/Web/Accessibility), [AJAX](/zh-CN/docs/Web/Guide/AJAX), [JavaScript](/zh-CN/docs/Web/JavaScript) diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md index a1eb43d501d783..8bf6f4633a05cb 100644 --- a/files/zh-cn/web/accessibility/aria/roles/button_role/index.md +++ b/files/zh-cn/web/accessibility/aria/roles/button_role/index.md @@ -8,67 +8,69 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/button_role original_slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role --- -button 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，
+**[button](https://www.w3.org/TR/wai-aria/roles#button)** 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，`role="button"` 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 `aria-pressed` 属性组合使用，以创建切换按钮。 -role="button"可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与aria-pressed属性组合使用，以创建切换按钮。+> **备注：** 在可能的情况下，建议使用原生 HTML 按钮 (`备注： 在可能的情况下，建议使用原生 HTML 按钮 (
<button>,<input type="button" />,<input type="submit" />, <input type="reset" />and<input type="image" />) 而不是按钮角色，因为原生 HTML 按钮得到了较老用户代理和辅助技术的广泛支持。原生 HTML 按钮也支持键盘和焦点需求，不需要额外的定制。
