ARIA：列表项角色

ARIA 的 listitem 角色可用于识别列表中的一项。它通常与 list 角色一起使用，后者用于识别列表容器。

html
<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 容器来识别辅助技术。

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

注意：如果在工作中可能，应使用适当的语义 HTML 元素来标记列表及其列表项——<ul>/<ol> 和 <li>。有关完整示例，请参阅 最佳实践。

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

list

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

group

相关对象的集合，仅限于嵌套在列表中的列表项，其重要性不足以在页面目录中占据一席之地。

最佳实践

仅在必要时使用 role="list" 和 role="listitem" - 例如，如果您无法控制 HTML 但能够在之后使用 JavaScript 动态改进可访问性。

如果可能，应使用适当的语义 HTML 元素来标记列表和列表项——<ol>、<ul> 和 <li>。例如，上面的示例应改写如下

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

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

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

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

注意：使用 CSS 中的 list-style: none; 样式化列表会删除列表语义。添加 role="listitem" 会恢复语义。

注意：如果您正在标记将用作选项卡式界面的项目列表，则应改用 tab、tabpanel 和 tablist 角色。

规范

规范
可访问的富互联网应用程序 (WAI-ARIA)
# listitem

另请参阅