ARIA：menuitemradio 角色

描述

菜单和菜单栏中的项是菜单项。菜单项有三种类型：menuitem、menuitemcheckbox 和 menuitemradio。要在组内将勾选的菜单项数量限制为一个，请在组内的所有元素上使用 menuitemradio 角色。

menuitemradio 是同一角色的一组元素中的一个可勾选的菜单项，其中一次只能勾选其中一个。

三种菜单项元素只能包含在具有 menu 或 menubar 角色的元素内，或由其拥有，也可以选择嵌套在具有 group 角色的分组元素内。嵌套或被其他方式拥有（参见 aria-owns）在 menu 或 menubar 中，会将菜单项识别为相关的组件。

当子菜单中的所有项都属于同一个单选按钮组时，group 由菜单元素定义；不需要 group 元素。

包含 menuitemradio 角色的菜单项必须包含 aria-checked 属性，以便将单选按钮的状态暴露给辅助技术，除非使用 <input type="radio">，在这种情况下，应使用 checked 属性。

与 radio 类型 <input> 的 checked 属性类似，menuitemradio 的 aria-checked 属性指示菜单项是否被勾选（true）、未勾选（false）。与 menuitemcheckbox 不同，它没有 mixed 值。

同一组中的 menuitemradio 一次只能勾选一个。当组中的一个项被勾选时，aria-checked 属性设置为 true，而同一组中之前被勾选的 menuitemradio 元素（如果存在）则变为未勾选，通过将 aria-checked 属性值切换为 false 实现。

如果希望组中可以勾选多个项，或者希望启用勾选和取消勾选一项，请考虑使用 menuitemcheckbox。

如果 menu 或 menubar 包含多个 menuitemradio 元素组，或者 menu 包含一个 menuitemradio 元素组以及其他不相关的 menuitem 元素和/或 menuitemcheckbox 元素，请将每个相关的 menuitemradio 元素集包含在 group 元素中，或使用 separator 元素将 menuitemradio 元素组与其他菜单项分隔开（或者使用具有等效角色的 HTML 元素，例如 <fieldset> 分组或主题分隔符 <hr>）。

需要一个可访问的名称。理想情况下，可访问的名称应来自关联的 <label> 元素（如果使用 <input type="radio">）或可见的后代内容。请注意，如果标签或后代内容不足，并且最好使用 aria-labelledby 引用非后代内容，或者使用 aria-label，那么这两个 ARIA 属性将隐藏其他后代内容，使其对辅助技术不可见。

如果组中的所有元素都不存在于 DOM 中，请包含 aria-setsize 和 aria-posinset 属性。在 menuitemradio 上指定 aria-setsize 和 aria-posinset 时，应相对于菜单中的总项数（不包括任何分隔符）来设置值。

menuitemradio 元素可以包含短语内容，但不能包含交互式内容作为后代，也不能包含具有 tabindex 属性的后代。

所有后代都是展示性的

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

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

<div role="menuitemradio"><h6>Name of my radio button</h6></div>

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

<div role="menuitemradio">
  <h6 role="presentation">Name of my radio button</h6>
</div>

从辅助技术用户的角度来看，标题不存在，因为前面的代码片段在辅助功能树中等同于以下内容：

<div role="menuitemradio">Name of my radio button</div>

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

menu 角色

提供用户可以调用的常用操作或功能的列表的组件。

menubar 角色

类似于 menu，提供一组一致的常用命令，这些命令保持可见，通常呈水平排列。

group 角色

包含 menuitem 元素的组的容器，包括 menu 或 menubar 中的 menuitemradio 元素。

aria-checked (必需)

设置为 true 或 false，表示 menuitemradio 当前的“勾选”状态。

键盘交互

当 menu 打开时，或者当 menubar 获得焦点时，键盘焦点会放在第一个项上。菜单和菜单栏中的所有项都可聚焦，包括所有 menuitemradio 元素。

如果 menuitemradio 位于 menubar 的子菜单中，或者通过菜单按钮打开的菜单中，则必须通过编程实现以下键盘交互。

Enter

如果未勾选，则勾选当前获得焦点的 menuitemradio，并取消勾选同一组中任何其他已勾选的 menuitemradio 元素。同时关闭菜单。

空格

如果未勾选，则勾选当前获得焦点的 menuitemradio，并取消勾选同一组中任何其他已勾选的 menuitemradio 元素，而不关闭菜单。

Escape

关闭菜单。在菜单栏中，将焦点移至父菜单栏项。

右箭头

关闭子菜单。在菜单栏中，将焦点移至菜单栏中的下一项，如果存在子菜单则打开它。

左箭头

关闭菜单。在菜单栏中，将焦点移至菜单栏中的上一项，如果存在子菜单则打开它。

向下箭头

将焦点移至菜单中的下一项。如果焦点位于最后一项，则将焦点移至第一项。

向上箭头

将焦点移至菜单中的上一项。如果焦点位于第一项，则将焦点移至最后一项。

Home

将焦点移至菜单中的第一项。

End

将焦点移至菜单中的最后一项。

字符

将焦点移至名称以键入字符开头的下一项。如果没有项的名称以键入字符开头，则焦点不移动。

必需的 JavaScript

所需的事件处理程序

onclick

处理单选按钮和关联标签的鼠标点击事件，这些事件将通过更改 aria-checked 属性的值来更改单选按钮的状态，并改变单选按钮的外观，使其对视障用户显示为已勾选或未勾选。

onKeyDown

处理用户按下 Space 键更改单选按钮状态的情况，通过更改 aria-checked 属性的值来更改单选按钮的状态，并改变单选按钮的外观，使其对视障用户显示为已勾选或未勾选。还处理上面键盘导航部分列出的所有键。

示例

<li role="menuitemradio" tabindex="-1" aria-checked="false">Purple</li>

tabindex="-1" 使 menuitemradio 可聚焦，但不属于页面标签顺序。如果我们包含 aria-checked="true"，它将表明 menuitemradio 已被勾选，并且我们会使用属性选择器 [role='menuitemradio'][aria-checked='true'] 在视觉上将选定状态样式化为已勾选。相反，aria-checked="false" 的存在会向辅助技术表明 menuitemradio 是可勾选但当前未勾选。可访问名称“purple”来自内容。

选定状态的视觉外观是已勾选的单选按钮，我们可以使用 生成内容 来创建，使其可见并与内容颜色相同，通过 CSS 属性选择器 同步 aria-checked 值，并更改 background-color。

[role="menuitemradio"]::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  padding: 0.1em;
  border: 2px solid #333333;
  border-radius: 50%;
  box-sizing: border-box;
  background-clip: content-box;
  margin-inline-end: 2px;
}
[role="menuitemradio"][aria-checked="true"]::before {
  background-color: purple;
}

不要使用 background 简写属性，因为它会覆盖我们用于创建单选按钮效果的 background-clip 属性。

优先使用 HTML

ARIA 的第一条规则是：如果原生 HTML 元素或属性具有您所需的语义和行为，请使用它，而不是重新利用元素并添加 ARIA 角色、状态或属性来使其可访问。因此，建议使用原生的 HTML 单选按钮表单控件，而不是使用 JavaScript 和 ARIA 来重新创建单选按钮的功能。

规范

另见

• radio 角色
• <input type="radio">