ARIA: menuitemcheckbox 角色

描述

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

这三个元素只能包含在具有 menu 或 menubar 角色的元素中，或者由它们拥有，还可以选择性地嵌套在具有 group 角色的分组元素中。嵌套在 menu 或 menubar 中，或由其拥有（参见 aria-owns）会将菜单项标识为相关控件。

菜单项，包括 menuitemcheckbox 元素，可以包含在 group 元素中，或用具有 separator 角色的元素分隔，或者其他等效的本地角色，例如 <fieldset> 和 <hr>。

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

与 checkbox 类型 <input> 的 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 元素的任何后代元素，因为 presentation 角色不支持语义子元素。

例如，考虑以下 menuitemcheckbox 元素，它包含一个标题。

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

由于 menuitemcheckbox 的后代是表示性的，因此以下代码是等效的：

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

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

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

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

menu 角色

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

menubar 角色

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

group 角色

menu 或 menubar 中 menuitemcheckbox 元素组的容器。

aria-checked（必需）

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

键盘交互

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

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

Enter

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

空格

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

Escape

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

右箭头

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

左箭头

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

向下箭头

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

向上箭头

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

Home

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

End

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

字符

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

必需的 JavaScript

所需的事件处理程序

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 是可勾选的，但当前未勾选。可访问名称“purple”来自内容。

选中状态的视觉外观是一个已勾选的复选框，我们可以使用 生成的内容 来创建它，使其可见并与内容颜色相同，方法是使用 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";
}

优先使用 HTML

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

规范

另见

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