ARIA：menuitemcheckbox 角色

菜单和菜单栏中的项目是菜单项。菜单项有三种类型：menuitem、menuitemradio 和 menuitemcheckbox。

这三种元素只能包含在角色为 menu 或 menubar 的元素中，或者由这些元素拥有，可以选择嵌套在角色为 group 的分组元素中。被嵌套在 menu 或 menubar 中，或者被它们拥有（参见 aria-owns）会识别这些菜单项为相关的窗口小部件。

菜单项，包括 menuitemcheckbox 元素，可以分组在 group 元素中，或者通过角色为 separator 的元素或其他等效的原生角色（如 <fieldset> 和 <hr>）分隔。

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

类似于 <input> 类型为 checkbox 的元素的 checked 属性，menuitemcheckbox 的 aria-checked 属性指示菜单项是选中（true）、未选中（false），还是表示包含选中和未选中值混合的其他菜单项的子级菜单（mixed）。mixed 值类似于复选框的 indeterminate 属性，该属性显示第三种既不选中也不未选中的状态。

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

如果集合中的所有元素都不存在于 DOM 中，则包含 aria-setsize 和 aria-posinset 属性。在 menuitemcheckbox 上指定 aria-setsize 和 aria-posinset 时，请根据菜单中项目的总数设置值，不包括任何分隔符。

menuitemcheckbox 元素可以包含文字内容，但不能包含交互式内容作为子代，也不能包含指定了 tabindex 属性的子代。

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

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

<div role="menuitemcheckbox"><h6>Name of my checkbox</h6></li>

由于 menuitemcheckbox 的子代是演示性的，因此以下代码等效

<div role="menuitemcheckbox"><h6 role="presentation">Name of my checkbox</h6></li>

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

<div role="menuitemcheckbox">Name of my checkbox</div>

menu 角色

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

menubar 角色

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

group 角色

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

aria-checked（必需）

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

当菜单打开，或菜单栏获得焦点时，键盘焦点将放置在第一个项目上。两者中的所有项目都可获得焦点，包括所有menuitemcheckbox元素。

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

Enter

切换menuitemcheckbox的aria-checked状态并关闭菜单。

Space

切换menuitemcheckbox的aria-checked状态。不关闭菜单。

Escape

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

右箭头

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

左箭头

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

下箭头

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

上箭头

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

Home

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

End

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

字符

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

必需的事件处理程序

onclick

处理对复选框和关联标签的鼠标点击，这将通过更改aria-checked属性的值和复选框的外观来改变复选框的状态，使其对有视力的人来说看起来是选中或未选中。

onKeyDown

处理用户按下Space键以通过更改aria-checked属性的值和复选框的外观来改变复选框的状态的情况，使其对有视力的人来说看起来是选中或未选中。还处理上面键盘导航部分中列出的所有键。

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

tabindex="-1" 使menuitemcheckbox可获得焦点，但不是页面选项卡序列的一部分。如果我们包含aria-checked="true"，它将表示menuitemcheckbox被选中，并且我们将使用属性选择器[role='menuitemcheckbox'][aria-checked='true']对选中状态进行视觉样式设置，使其看起来是选中的。相反，aria-checked="false"的存在表示辅助技术menuitemcheckbox是可选中但当前未选中。可访问的名称“紫色”来自内容。

选中状态的视觉外观是一个选中的复选框，我们可以使用生成的內容来创建它，使其可见并与内容具有相同的颜色，通过使用 CSS 属性选择器 和 继承 颜色与aria-checked值同步。

[role="menuitemcheckbox"]::before {
  display: inline-block;
  content: "";
  color: transparent;
  width: 1em;
  text-align: center;
  outline: 1px solid;
  margin-inline-end: 2px;
  font-family: sans-serif;
}
[role="menuitemcheckbox"][aria-checked="true"]::before {
  color: inherit;
  content: "X";
}

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

• menuitemradio 角色
• checkbox 角色
• <input type="checkbox">