list

使用场景

无序列表使用 <ul>，有序列表使用 <ol>，说明列表使用 <dl>。每种原生元素都会自动在无障碍树中以带有正确项目计数的列表形式呈现。

在 <ul> 上显式设置 role="list" 的唯一实际理由是 Safari 的”列表角色移除”行为：当 <ul> 应用了 list-style: none 时，WebKit 会假定该列表仅用于样式目的，从而将其列表角色从无障碍树中移除。显式设置 role="list" 可覆盖该启发式规则。

不要将 role="list" 与 role="listbox" 混淆。list 是静态内容；listbox 是可交互的选择控件。混用会导致屏幕阅读器错误地期待不存在的选择语义。

常见错误

• 在以 <div> “项目”为子元素的 <div> 容器上使用 role="list"，而子元素没有 role="listitem"。list 角色要求子列表项在无障碍树中可见；否则项目计数将不正确。
• 将 role="list" 用于导航菜单，而非带有 <ul> 的 <nav>。导航地标更为有用。
• 在没有 list-style: none 的 <ul> 上添加 role="list"。这是多余的，因为原生角色已存在。
• 在应使用 role="listbox" 时误用 role="list"。
• 将 <li> 元素包裹在非列表父元素（如 <div>）中——列表项会因此成为孤立节点。

示例

<!-- 推荐方式 -->
<ul>
  <li>屏幕阅读器</li>
  <li>开关控制</li>
  <li>语音控制</li>
</ul>

<!-- 覆盖 Safari 的列表角色移除 -->
<ul role="list" style="list-style: none;">
  <li role="listitem">屏幕阅读器</li>
  <li role="listitem">开关控制</li>
</ul>