1. Web
  2. 无障碍
  3. ARIA
  4. ARIA 参考
  5. 角色
  6. listitem

ARIA: listitem 角色

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

项目列表。具有 list 角色的元素必须有一个或多个具有 listitem 角色的子元素，或一个或多个具有 group 角色的元素，而该 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

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 ，由 MDN 贡献者 进行。

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