ARIA: option 角色

描述

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

所有可选择的选项都应将 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> 元素或带有 checkbox 或 radio 类型的 <input> 元素。这些原生的 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>

关联的 ARIA 角色、状态和属性

关联的角色

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

用于指示哪个元素为选项提供了标签。在适当的情况下，应使用选项的内容代替。可选。

aria-label

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

规范

另见

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