option

使用时机

在 <select> 内使用原生 <option>。原生元素已内置全部所需行为。

role="option" 适用于自定义 role="listbox" 内的子项——通常是 combobox 弹出列表或无法用原生元素设置样式的多选选择器。每个 option 元素必须拥有唯一的 id，以便父级 combobox 或 listbox 通过 aria-activedescendant 引用。

若 option 在多选 listbox 中表示复选框式选择，请设置 aria-selected="true"。仅在罕见的带勾选标记的 option 模式下才使用 aria-checked（大多数多选 listbox 使用 aria-selected）。

常见错误

• role="option" 不在 role="listbox" 父级内。屏幕阅读器会将其公告为孤立选项，缺乏组上下文。
• 需要作为 aria-activedescendant 目标的 option 缺少 id——combobox 无法指向它。
• 仅切换 CSS .selected 类而不更新 aria-selected，导致视觉与无障碍树信息不一致。
• 在单选 listbox 中所有 option 均设置 aria-selected="false"，而本应有一个默认选中项。应将其中一项设为 aria-selected="true"。
• option 本身为按钮或链接（如 <a role="option">）。辅助技术中 option 语义会覆盖链接语义，但点击行为保留，造成混淆。

示例

<label id="lang">语言</label>
<ul
  role="listbox"
  aria-labelledby="lang"
  tabindex="0"
  aria-activedescendant="lang-2"
>
  <li id="lang-1" role="option" aria-selected="false">English</li>
  <li id="lang-2" role="option" aria-selected="true">Spanish</li>
  <li id="lang-3" role="option" aria-selected="false">French</li>
</ul>