ARIA: option 角色

option 角色用于标识用户可以在 listbox 中做出的选择。这些选项类似于 <option> 元素在 <select> 元素中，但它们可以包含图像。

所有可选择选项都应具有与状态匹配的 aria-selected，选中时为 true，未选中时为 false。如果选项不可选择，则可以省略 aria-selected。已禁用的选项可以具有 aria-disabled="true" 和 aria-selected="false" 来告知用户选项存在，但已禁用。

option 角色用于标识 listbox 的可选择选项。必须为选项提供可访问的名称。通常，选项的可访问名称应来自元素的后代内容。

作者还可以通过为具有 option 角色的元素指定 aria-label 或 aria-labelledby 来显式地提供可访问的名称。如果使用 aria-label 或 aria-labelledby，并且选项还显示了可见的文本标签，则作者必须确保他们遵守 WCAG 成功准则 2.5.3 标签在名称中。

强烈建议使用 <select> 元素或 <input> 元素（类型为 checkbox 或 radio），如果可能的话。这些原生 HTML 元素提供了键盘交互功能，可以自动为你管理所有后代的焦点。

某些类型的用户界面组件，在平台可访问性 API 中表示时，只能包含文本。可访问性 API 无法表示 option 中包含的语义元素。为了解决此限制，浏览器会自动将角色 presentation 应用于任何 option 元素的所有后代元素，因为它是一个不支持语义子级的角色。

例如，考虑以下包含标题的 option 元素。

<div role="option"><h3>Title of my option</h3></div>

由于 option 的后代是表现性的，因此以下代码是等效的

<div role="option"><h3 role="presentation">Title of my option</h3></div>

从辅助技术用户的角度来看，标题不存在，因为前面的代码片段在 可访问性树 中等效于以下内容

<div role="option">Title of my option</div>

关联的角色

listbox

option 必须包含在 listbox 中或由 listbox 拥有

状态和属性

aria-selected

用于描述选项的选择状态。必需的。

aria-checked

用于描述选项在多选模式下使用时的选中状态。支持 true、false 和 mixed。可选的。

aria-posinset

用于描述选项在集合中的位置，当该位置与 DOM 不匹配时，例如虚拟滚动，其中一次只显示一部分选项。可选的。

aria-setsize

与 aria-posinset 一起使用，用于声明选项的总数。可选的。

aria-disabled

用于指示选项存在但不可编辑。可选的。

aria-hidden

用于从辅助工具中隐藏选项。它应该只用于隐藏不可见的内容，或隐藏可见的内容（如果它改善了辅助技术的体验，例如冗余内容）。可选的。

aria-invalid

用于指示选项的值被应用程序认为无效。可选的。

aria-busy

用于指示元素正在被修改，例如在加载时。可选的。

aria-labelledby

用于指示哪个元素为选项创建标签。如果标签存在于 DOM 中，则应改用 aria-labelledby。可选的。

aria-label

用于为选项创建标签。如果标签存在于 DOM 中，则应改用 aria-labelledby。可选的。

（有关详细信息和 ARIA 状态和属性的完整列表，请参见 ARIA option（角色） 文档。）

• HTML <select> 元素
• HTML <label> 元素
• HTML <option> 元素
• ARIA：combobox 角色
• ARIA：list 角色
• ARIA：listbox 角色