listitem

使用时机

在 <ul> 或 <ol> 内部，直接使用 <li> 即可。浏览器会自动暴露角色、条目总数及当前位置信息。

使用 role="listitem" 的唯一实际场景：你已在非列表元素上应用了 role="list"（例如，为覆盖 Safari 的 list-style: none 启发式行为），且内部子元素也是非列表元素。此时每个子元素需要 role="listitem" 才能被计数。

listitem 必须位于 role="list" 内部。没有列表父元素的裸 role="listitem" 无效，屏幕阅读器会忽略它。

常见错误

• 在父元素不是 role="list" 的 <div> 上使用 role="listitem"。listitem 缺少所属分组上下文。
• <li> 置于 <ul> / <ol> 之外。HTML 无效。
• 当 DOM 层级结构已反映位置信息时，仍设置 aria-posinset 和 aria-setsize。属于冗余设置。
• 混淆 role="listitem" 与 role="option"（后者用于 role="listbox" 内的可选中条目）。
• 在已位于 <ul> 内的 <li> 元素上添加 role="listitem"——角色重复，无任何效果。

示例

<!-- 推荐写法 -->
<ul>
  <li>JAWS</li>
  <li>NVDA</li>
  <li>VoiceOver</li>
</ul>

<!-- 非列表容器加显式角色 -->
<div role="list" aria-label="最近更新">
  <div role="listitem">新 /toolkit/standards/ 落地页</div>
  <div role="listitem">WCAG 2.2 参考完整版</div>
</div>