ARIA:listitem 角色
ARIA listitem
角色可用于标识项目列表中的项目。它通常与 list
角色(用于标识列表容器)结合使用。
html
<section role="list">
<div role="listitem">列表项 1</div>
<div role="listitem">列表项 2</div>
<div role="listitem">列表项 3</div>
</section>
描述
关联的 WAI-ARIA 角色、状态和属性
- list
-
项目列表。角色为
list
的元素必须有一个或多个角色为listitem
的元素作为子元素,一个或多个角色为group
的元素具有一个或多个具有listitem
角色的元素作为子元素。 - group (en-US)
-
相关对象的集合,在嵌套在列表中时仅限于列表项,其重要性不足以在页面目录中拥有自己的位置。
最佳实践
仅在必要时使用 role="list"
和 role="listitem"
。例如,无法控制 HTML 但能够在之后动态使用 JavaScript 提升无障碍的时候。
与 HTML <ol>
和 <ul>
不同,ARIA list
角色不区分有序列表和无序列表。如果可能,你应该使用适当的语义 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>
备注: ARIA list
/ listitem
角色不区分有序列表和无序列表。
备注: 给列表添加 CSS 样式 list-style: none;
移除列表语义。添加 role="listitem"
获得列表语义。
备注: 如果要标记将用作选项卡式界面的项目列表,则应改为使用 tab
、tabpanel
和 tablist
角色。
规范
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # listitem |
参见
- HTML
<li>
元素 - HTML
<ul>
元素 - HTML
<ol>
元素 - ARIA:
list
角色 - ARIA:
group
角色 (en-US) - 无障碍对象模型
- HTML 中的 ARIA
- ARIA 列表示例 — by Scott O'Hara