From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../using_the_aria-hidden_attribute/index.html | 94 ++++++++++++++++ .../using_the_button_role/index.html | 122 --------------------- .../index.html" | 94 ---------------- .../aria/roles/button_role/index.html | 122 +++++++++++++++++++++ 4 files changed, 216 insertions(+), 216 deletions(-) create mode 100644 files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html delete mode 100644 files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html delete mode 100644 "files/zh-cn/web/accessibility/aria/aria_techniques/\344\275\277\347\224\250aria-hidden\345\261\236\346\200\247/index.html" create mode 100644 files/zh-cn/web/accessibility/aria/roles/button_role/index.html (limited to 'files/zh-cn/web/accessibility/aria') diff --git a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/index.html new file mode 100644 index 0000000000..8b7f706afa --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_aria-hidden_attribute/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 +--- +

{{draft}}

+ +

本文用来说明如何使用aria-hidden属性。aria-hidden属性可以用来控制一系列可访问API中的非交互内容的显示或隐藏。

+ +

描述

+ +
+

把 aria-hidden="true" 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：

+ + + +

根据可访问性的第四条规则，aria-hidden="true" 不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。

+ +

如果父元素带有 aria-hidden="true" ，那么即使使用 aria-hidden="false" 也无法将该元素显示出来。

+
+ +
+

WAI-ARIA Authoring Practices 1.1 提示 aria-hidden="false" 在现阶段 各个浏览器中表现不同.

+
+ +

比较 aria-hidden="true"， role="presentation" 和 role="none"

+ +

表面上，aria-hidden="true"，role="presentation"，和role="none" 很相似，因为这三者都有以下特性:

+ + + +

尽管有上面这些相同点，但是各个属性的意图是不同的。

+ + + +

+ +

可选值

+ +
+
false
+
（默认）元素会暴露给可访问性API。
+
true
+
元素不会暴露给可访问性API。
+
undefined
+
（默认）客户端决定元素是否暴露给可访问性API。
+
+ +

示例

+ +
 <i class="icon" aria-hidden="true" />
+ 
+ +

无障碍问题

+ +

最佳实践

+ +

 aria-hidden="true" 在以下场景不应该被使用:

+ + + +

在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加aria-hidden="true"属性。

+ +

技术规格

+ +

另见

+ + 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 deleted file mode 100644 index e0e35c449a..0000000000 --- a/files/zh-cn/web/accessibility/aria/aria_techniques/using_the_button_role/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -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 ---- -

button 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，role="button" 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 aria-pressed 属性组合使用，以创建切换按钮。

- -
注意: 在可能的情况下，建议使用原生HTML按钮 (<button>, <input type="button" />,  <input type="submit" />, <input type="reset" /> and <input type="image" />) 而不是按钮角色，因为原生HTML按钮得到了较老用户代理和辅助技术的广泛支持。原生HTML按钮也支持键盘和焦点需求，不需要额外的定制。
- -

键盘 and 聚焦

- -

按钮是交互式控件，因此其本身是可聚焦的。如果button 角色被添加到一个自身不可聚焦的元素(such as <span>, <div> or <p>) 那么必须使用tabindex 属性来使按钮可聚焦。

- -

按钮可以由鼠标用户和键盘用户操作。 对于原生HTML <button> 元素 ，按钮的 onclick 事件会在鼠标单击和按下键盘的 Space or Enter 时被触发， 同时这个按钮处于聚焦状态。 但是如果使用其他标签来创建“自定义按钮”，那么onclick事件只会在点击鼠标光标时触发，即使使用role="button" 。因此，开发人员必须向元素添加一个单独的关键事件处理程序，以便在按下 Space or Enter 时触发按钮。

- -

Warning: 把给一个链接标记为按钮角色的链接时要谨慎。按钮将使用 Space or Enter 键触发，而链接被期望使用 Enter 键触发。 换句话说，当链接被用来作为按钮的时候，仅仅添加role="button"是不够的。还需要添加一个 key 事件处理程序来侦听 Space 键，以便与原生按钮保持一致。

- -

可切换的按钮

- -

使用role="button"的一个优点是它允许创建切换按钮。一个切换按钮可以有两个状态:pressed，not pressed。除了 button角色之外，按钮是否为切换按钮，也可以用aria-pressed的属性来表示。

- - - -

Labeling buttons

- -

按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 aria-label 或 aria-labelledby 属性提供可访问的名称。

- -

对用户代理和辅助技术的可能影响

- -

当使用 button 角色时，用户代理应该将该元素公开为操作系统的易访问性API中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说："点击"+按钮的可访问的name 就能激活这个按钮。

- -
Note: 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。
- -

Examples

- -

ARIA Basic Button

- -

在下面的代码片段中，一个span元素已经被赋予了按钮角色。由于使用的是 <span> 元素，因此需要提供 tabindex 属性使按钮的可聚焦并成为tab顺序流中的一部分。注意，这段代码提供了CSS样式，以使 <span>元素看起来像一个按钮， handleBtnClick 和handleBtnKeyPress 是事件处理程序，当鼠标单击、 Space or Enter 被按下时，执行该按钮的操作。

- -
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>
-
- -

ARIA Toggle Button

- -

在这个片段中，使用 button 角色和 aria-pressed 属性，来将 <span> 元素转换为一个切换按钮，当按钮被激活时， aria-pressed 的值在true和false之间切换。

- -

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>
- -

CSS

- -
button,
-[role="button"] {
-    padding: 3px;
-    border: 1px solid #CCC;
-}
-
-button[aria-pressed="true"],
-[role="button"][aria-pressed="true"] {
-    border: 2px solid #000;
-}
-
- -

JavaScript

- -
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);
-}
- -

Result

- -

{{EmbedLiveSample('ARIA_Toggle_Button')}}

- -

Notes 

- -

ARIA attributes used

- - - -

Additional resources

- - diff --git "a/files/zh-cn/web/accessibility/aria/aria_techniques/\344\275\277\347\224\250aria-hidden\345\261\236\346\200\247/index.html" "b/files/zh-cn/web/accessibility/aria/aria_techniques/\344\275\277\347\224\250aria-hidden\345\261\236\346\200\247/index.html" deleted file mode 100644 index 8b7f706afa..0000000000 --- "a/files/zh-cn/web/accessibility/aria/aria_techniques/\344\275\277\347\224\250aria-hidden\345\261\236\346\200\247/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -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 ---- -

{{draft}}

- -

本文用来说明如何使用aria-hidden属性。aria-hidden属性可以用来控制一系列可访问API中的非交互内容的显示或隐藏。

- -

描述

- -
-

把 aria-hidden="true" 加到元素上会把该元素和它的所有子元素从可访问性树上移除。这样做可以通过隐藏下列内容来提升使用辅助技术的用户体验：

- - - -

根据可访问性的第四条规则，aria-hidden="true" 不应该被用在可聚焦的元素上。 而且，由于这个属性是可以被子元素继承的，它也不应该被用在可聚焦元素的父元素上。

- -

如果父元素带有 aria-hidden="true" ，那么即使使用 aria-hidden="false" 也无法将该元素显示出来。

-
- -
-

WAI-ARIA Authoring Practices 1.1 提示 aria-hidden="false" 在现阶段 各个浏览器中表现不同.

-
- -

比较 aria-hidden="true"， role="presentation" 和 role="none"

- -

表面上，aria-hidden="true"，role="presentation"，和role="none" 很相似，因为这三者都有以下特性:

- - - -

尽管有上面这些相同点，但是各个属性的意图是不同的。

- - - -

- -

可选值

- -
-
false
-
（默认）元素会暴露给可访问性API。
-
true
-
元素不会暴露给可访问性API。
-
undefined
-
（默认）客户端决定元素是否暴露给可访问性API。
-
- -

示例

- -
 <i class="icon" aria-hidden="true" />
- 
- -

无障碍问题

- -

最佳实践

- -

 aria-hidden="true" 在以下场景不应该被使用:

- - - -

在以上三个场景中，元素已经被隐藏，从可访问树种移除了，无需再添加aria-hidden="true"属性。

- -

技术规格

- -

另见

- - diff --git a/files/zh-cn/web/accessibility/aria/roles/button_role/index.html b/files/zh-cn/web/accessibility/aria/roles/button_role/index.html new file mode 100644 index 0000000000..e0e35c449a --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/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 +--- +

button 角色应该用于可单击的元素， 当用户激活时触发响应。 在其本身，role="button" 可以使任何元素 (e.g. {{HTMLElement("p")}}, {{HTMLElement("span")}} or {{HTMLElement("div")}}) 作为一个屏幕阅读器的按钮控件出现。此外，该角色还可以与 aria-pressed 属性组合使用，以创建切换按钮。

+ +
注意: 在可能的情况下，建议使用原生HTML按钮 (<button>, <input type="button" />,  <input type="submit" />, <input type="reset" /> and <input type="image" />) 而不是按钮角色，因为原生HTML按钮得到了较老用户代理和辅助技术的广泛支持。原生HTML按钮也支持键盘和焦点需求，不需要额外的定制。
+ +

键盘 and 聚焦

+ +

按钮是交互式控件，因此其本身是可聚焦的。如果button 角色被添加到一个自身不可聚焦的元素(such as <span>, <div> or <p>) 那么必须使用tabindex 属性来使按钮可聚焦。

+ +

按钮可以由鼠标用户和键盘用户操作。 对于原生HTML <button> 元素 ，按钮的 onclick 事件会在鼠标单击和按下键盘的 Space or Enter 时被触发， 同时这个按钮处于聚焦状态。 但是如果使用其他标签来创建“自定义按钮”，那么onclick事件只会在点击鼠标光标时触发，即使使用role="button" 。因此，开发人员必须向元素添加一个单独的关键事件处理程序，以便在按下 Space or Enter 时触发按钮。

+ +

Warning: 把给一个链接标记为按钮角色的链接时要谨慎。按钮将使用 Space or Enter 键触发，而链接被期望使用 Enter 键触发。 换句话说，当链接被用来作为按钮的时候，仅仅添加role="button"是不够的。还需要添加一个 key 事件处理程序来侦听 Space 键，以便与原生按钮保持一致。

+ +

可切换的按钮

+ +

使用role="button"的一个优点是它允许创建切换按钮。一个切换按钮可以有两个状态:pressed，not pressed。除了 button角色之外，按钮是否为切换按钮，也可以用aria-pressed的属性来表示。

+ + + +

Labeling buttons

+ +

按钮应该总是有一个可访问的名称。对于大多数按钮，这个名称将与按钮中的文本相同。在某些情况下，例如图标按钮，可通过 aria-label 或 aria-labelledby 属性提供可访问的名称。

+ +

对用户代理和辅助技术的可能影响

+ +

当使用 button 角色时，用户代理应该将该元素公开为操作系统的易访问性API中的按钮控件。屏幕阅读器应该将元素声明为一个按钮并描述其可访问的名称。语音识别软件应该可以通过说："点击"+按钮的可访问的name 就能激活这个按钮。

+ +
Note: 关于辅助技术如何处理这种技术，意见可能有所不同。上面所提供的信息是其中之一，因此并非规范。
+ +

Examples

+ +

ARIA Basic Button

+ +

在下面的代码片段中，一个span元素已经被赋予了按钮角色。由于使用的是 <span> 元素，因此需要提供 tabindex 属性使按钮的可聚焦并成为tab顺序流中的一部分。注意，这段代码提供了CSS样式，以使 <span>元素看起来像一个按钮， handleBtnClick 和handleBtnKeyPress 是事件处理程序，当鼠标单击、 Space or Enter 被按下时，执行该按钮的操作。

+ +
<span role="button" tabindex="0" onclick="handleBtnClick()" onKeyPress="handleBtnKeyPress()">Save</span>
+
+ +

ARIA Toggle Button

+ +

在这个片段中，使用 button 角色和 aria-pressed 属性，来将 <span> 元素转换为一个切换按钮，当按钮被激活时， aria-pressed 的值在true和false之间切换。

+ +

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>
+ +

CSS

+ +
button,
+[role="button"] {
+    padding: 3px;
+    border: 1px solid #CCC;
+}
+
+button[aria-pressed="true"],
+[role="button"][aria-pressed="true"] {
+    border: 2px solid #000;
+}
+
+ +

JavaScript

+ +
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);
+}
+ +

Result

+ +

{{EmbedLiveSample('ARIA_Toggle_Button')}}

+ +

Notes 

+ +

ARIA attributes used

+ + + +

Additional resources

+ + -- cgit v1.2.3-54-g00ecf