ARIA：menuitemradio 角色

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

menuitemradio 是一个可选中菜单项，它是一组具有相同角色的元素的一部分，其中一次只能选中一个元素。

三个菜单项元素只能包含在具有 menu 或 menubar 角色的元素中，或者由其拥有，可选地嵌套在具有 group 角色的组元素中。嵌套或以其他方式拥有（见 aria-owns）在 menu 或 menubar 中，将菜单项标识为相关的窗口小部件。

当子菜单中的所有项目都是同一个单选组的成员时，group 由菜单元素定义；group 元素不是必需的。

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

类似于 <input> 的 checked 属性，类型为 radio，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 元素（或具有等效角色的 HTML 元素，例如 <fieldset> 分组或主题断裂 <hr> 分隔符）将 menuitemradio 元素与其他菜单项分隔开。

需要一个可访问名称。理想情况下，可访问名称应来自关联的 <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></li>

由于 menuitemradio 的子元素是表示性的，因此以下代码是等效的

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

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

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

menu 角色

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

menubar 角色

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

group 角色

用于包含一组menuitem元素的容器，包括menu或menubar内的menuitemradio元素。

aria-checked (必需)

设置为true、false或mixed，它指示menuitemradio的当前“选中”状态。

当menu打开或menubar获得焦点时，键盘焦点将放在第一个项目上。这两个中的所有项目都可获得焦点，包括所有menuitemradio元素。

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

Enter

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

Space

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

Escape

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

Right Arrow

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

Left Arrow

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

Down Arrow

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

Up Arrow

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

Home

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

End

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

Character

将焦点移至下一个名称以输入的字符开头的项目。如果没有任何项目的名称以输入的字符开头，则焦点不会移动。

必需的事件处理程序

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”来自内容。

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

[role="menuitemradio"]::before {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  padding: 0.1em;
  border: 2px solid #333;
  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 属性。

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

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