From b033fb8f05c0a3a727bfdb212ba7dc04ee0dada2 Mon Sep 17 00:00:00 2001 From: mutoe Date: Sun, 22 Aug 2021 12:42:34 +0800 Subject: add ARIA list and listitem role for zh-CN --- .../accessibility/aria/roles/list_role/index.html | 122 +++++++++++++++++++++ .../aria/roles/listitem_role/index.html | 120 ++++++++++++++++++++ 2 files changed, 242 insertions(+) create mode 100644 files/zh-cn/web/accessibility/aria/roles/list_role/index.html create mode 100644 files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html (limited to 'files/zh-cn/web/accessibility/aria/roles') diff --git a/files/zh-cn/web/accessibility/aria/roles/list_role/index.html b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html new file mode 100644 index 0000000000..788446c200 --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/list_role/index.html @@ -0,0 +1,122 @@ +--- +title: 'ARIA: list role' +slug: Web/Accessibility/ARIA/Roles/List_role +tags: +- ARIA +- ARIA Role +- ARIA list +- 可访问性 +- 无障碍 +- Reference +- Role +- list +--- +

ARIA list 角色可用于标识项目列表。它通常与 listitem 角色结合使用，该角色用于标识包含在列表中的列表项。

+ +
<section role="list">
+  <div role="listitem">List item 1</div>
+  <div role="listitem">List item 2</div>
+  <div role="listitem">List item 3</div>
+</section>
+
+ +

描述

+ +

任何由外部容器和内部元素列表组成的内容都可以分别使用 list 和 listitem 容器识别为辅助技术。一个 list 必须有一个或多个 listitem 子级，或者，有一个或多个 group 作为子级，每个 group有一个或多个 listitem 作为子项。

+ +

关于应该使用哪些元素来标记 list 和 listitem 没有硬性规定，但是您应该确保 listitem 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。

+ +
+

警告

+

如果可能，您应该使用适当的语义化 HTML 元素来标记 list 及其 listitem，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。

+
+ +

关联的 WAI-ARIA 角色、状态和属性

+ +
+
listitem
+

列表或目录中的单个项目。角色为 listitem 的元素只能在角色为 list 或 group 的元素中找到。

+
group
+

相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。

+
+ +

键盘交互

+ +

无

+ +

所需的 JavaScript 功能

+ +

无

+ +

示例

+ +

ARIA Lists — Scott O'Hara 的一些有用的例子和想法

+ +

最佳实践

+ +

仅在必要时使用 role="list" 和 role="listitem"。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。

+ +

与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA list 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：

+ +
<ul>
+  <li>List item 1</li>
+  <li>List item 2</li>
+  <li>List item 3</li>
+</ul>
+ +

或者如果列表项的顺序很重要，则使用有序列表：

+ +
<ol>
+  <li>List item 1</li>
+  <li>List item 2</li>
+  <li>List item 3</li>
+</ol>
+ +
+

注意

+

ARIA list / listitem 角色不区分有序列表和无序列表。

+
+ +

顺便说一句，请注意，如果您使用 {{HTMLElement("ol")}} 或 {{HTMLElement("ul")}} 的语义 HTML 元素并应用 presentation 角色，则每个子 li 元素都会继承 presentation 角色，因为 ARIA 需要 listitem 元素具有父 list 元素。因此，li 元素不会暴露给辅助技术，但是包含在这些 li 元素中的元素，包括嵌套列表，对辅助技术是可见的。

+ +
+

注意

+

如果要标记将用作选项卡式界面的项目列表，则应改为使用 tab、tabpanel 和 tablist 角色。

+
+ +

规范

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName("ARIA","#list","list")}}{{Spec2('ARIA')}}
+ +

屏幕阅读器支持

+ +

TBD

+ +

相关链接

+ + + + diff --git a/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html new file mode 100644 index 0000000000..a4f9bb691d --- /dev/null +++ b/files/zh-cn/web/accessibility/aria/roles/listitem_role/index.html @@ -0,0 +1,120 @@ +--- +title: 'ARIA: listitem role' +slug: Web/Accessibility/ARIA/Roles/Listitem_role +tags: +- ARIA +- ARIA Role +- ARIA listitem +- 可访问性 +- 无障碍 +- Reference +- Role +- listitem +--- +

ARIA listitem 角色可用于标识项目列表中的项目。它通常与 list 角色结合使用，用于标识列表容器。

+ +
<section role="list">
+  <div role="listitem">List item 1</div>
+  <div role="listitem">List item 2</div>
+  <div role="listitem">List item 3</div>
+</section>
+
+ +

描述

+ +

任何由外部容器和内部元素列表组成的内容都可以分别使用 list 和 listitem 容器识别为辅助技术。

+ +

关于应该使用哪些元素来标记 list 和 listitem 没有硬性规定，但是您应该确保 listitem 在列表的上下文中有意义，例如购物清单、食谱步骤、行车路线。

+ +
+

警告

+

如果可能，您应该使用适当的语义化 HTML 元素来标记 list 及其 listitem，如 {{HTMLElement("ul")}}、{{HTMLElement("ol")}} 和 {{HTMLElement("li")}}。有关完整示例，请参阅 {{anch("Best_practices", "最佳实践")}}。

+
+ +

关联的 WAI-ARIA 角色、状态和属性

+ +
+
list
+

项目列表。角色为 list 的元素必须有一个或多个角色为 listitem 的元素作为子元素，一个或多个角色为 group 的元素具有一个或多个具有 listitem 角色的元素作为子元素。

+
group
+

相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。

+
+ +

键盘交互

+ +

无

+ +

所需的 JavaScript 功能

+ +

无

+ +

示例

+ +

ARIA Lists — Scott O'Hara 的一些有用的例子和想法

+ +

最佳实践

+ +

仅在必要时使用 role="list" 和 role="listitem"。例如，无法控制 HTML 但能够在之后动态使用 JavaScript 提升可访问性的时候。

+ +

与 HTML {{HTMLElement("ol")}} 和 {{HTMLElement("ul")}} 不同，ARIA list 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 HTML 元素来标记列表（{{HTMLElement("ol")}} 和 {{HTMLElement("ul")}}）和列表项（{{HTMLElement("li")}})。例如，我们上面的例子应该改写如下：

+ +
<ul>
+  <li>List item 1</li>
+  <li>List item 2</li>
+  <li>List item 3</li>
+</ul>
+ +

或者如果列表项的顺序很重要，则使用有序列表：

+ +
<ol>
+  <li>List item 1</li>
+  <li>List item 2</li>
+  <li>List item 3</li>
+</ol>
+ +
+

注意

+

ARIA list / listitem 角色不区分有序列表和无序列表。

+
+ +
+

注意

+

如果要标记将用作选项卡式界面的项目列表，则应改为使用 tab、tabpanel 和 tablist 角色。

+
+ +

规范

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName("ARIA","#listitem","listitem")}}{{Spec2('ARIA')}}
+ +

屏幕阅读器支持

+ +

TBD

+ +

相关链接

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