ARIA:list 角色
ARIA list
角色可用于标识项目列表。它通常与 listitem
角色结合使用,该角色用于标识包含在列表中的列表项。
html
<section role="list">
<div role="listitem">列表项 1</div>
<div role="listitem">列表项 2</div>
<div role="listitem">列表项 3</div>
</section>
描述
关联的 WAI-ARIA 角色、状态和属性
最佳实践
仅在必要时使用 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
角色不区分有序列表和无序列表。
顺便说一句,请注意,如果你使用 <ol>
或 <ul>
的语义 HTML 元素并应用 presentation
角色,则每个子 <li>
元素都会继承 presentation
角色,因为 ARIA 需要 listitem
元素具有父 list
元素。因此,<li>
元素不会暴露给辅助技术,但是包含在这些 <li>
元素中的元素,包括嵌套列表,对辅助技术是可见的。
规范
Specification |
---|
Accessible Rich Internet Applications (WAI-ARIA) # list |
参见
<ul>
元素<ol>
元素<li>
元素- ARIA:listitem 角色
- ARIA:group 角色
- ARIA 列表示例——由 Scott O'Hara 撰写
- Accessibility Object Model
- ARIA in HTML