View in EnglishAlways switch to English

ARIA：listitem 角色

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

html

<section role="list">  <div role="listitem">列表项 1</div>  <div role="listitem">列表项 2</div>  <div role="listitem">列表项 3</div></section>

描述

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

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

备注：如果可能，你应该使用适当的语义化 HTML 元素来标记列表及列表项，如<ul>、<ol> 和<li>。有关完整示例，请参阅最佳实践。

list: 项目列表。角色为list 的元素必须有一个或多个角色为listitem 的元素作为子元素，一个或多个角色为group 的元素具有一个或多个具有listitem 角色的元素作为子元素。
group: 相关对象的集合，在嵌套在列表中时仅限于列表项，其重要性不足以在页面目录中拥有自己的位置。

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

如果可能，你应该使用适当的语义 HTML 元素来标记列表（<ol> 和<ul>）和列表项（<li>）。例如，我们上面的例子应该改写如下：

html

<ul>  <li>列表项 1</li>  <li>列表项 2</li>  <li>列表项 3</li></ul>

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

html

<ol>  <li>列表项 1</li>  <li>列表项 2</li>  <li>列表项 3</li></ol>

备注：ARIAlist /listitem 角色不区分有序列表和无序列表。

备注：给列表添加 CSS 样式list-style: none; 移除列表语义。添加role="listitem" 获得列表语义。

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

Specification
Accessible Rich Internet Applications (WAI-ARIA) # listitem

This page was last modified on⁨2025年4月13日⁩ byMDN contributors.