ARIA: list 角色

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) # list

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年5月12日⁩，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的可能问题