ARIA：列表角色

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

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

描述

任何由外部容器和内部元素列表组成的内容都可以分别使用 list 和 listitem 容器标识给辅助技术。list 只能包含零个或多个 listitem 子元素。

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

注意：最佳实践规定使用适当的语义 HTML 元素而不是 ARIA 角色来标记列表和列表项 - <ul>、<ol> 和 <li>。有关完整示例，请参阅 最佳实践。

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

listitem 角色

列表中的单个项目。具有 listitem 角色的元素只能在具有 list 角色的元素中找到。

最佳实践

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

与 HTML <ol> 和 <ul> 不同，ARIA list 角色不区分有序列表和无序列表。如果可能，您应该使用适当的语义 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 角色不区分有序列表和无序列表。

顺便说一句，请注意，如果您使用的是 <ol> 或 <ul> 的语义 HTML 元素并应用 presentation 的角色，则每个子 <li> 元素都继承 presentation 角色，因为 ARIA 要求 listitem 元素具有父 list 元素。因此，<li> 元素不会显示给辅助技术，但这些 <li> 元素内部包含的元素（包括嵌套列表）对辅助技术是可见的。

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

规范

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

另请参阅