ARIA: checkbox 角色

checkbox 角色用于可交互的选中控件。包含 role="checkbox" 的元素还必须包含 aria-checked 属性，以向辅助技术公开复选框的状态。

html

<span
  role="checkbox"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label id="chk1-label">Remember my preferences</label>

注意： ARIA 的第一条规则是：如果原生 HTML 元素或属性具有您所需的语义和行为，请使用它，而不是重新用途化元素并添加 ARIA。请改用原生的 HTML 复选框 <input type="checkbox">（带有相关的 <label>），它本身就提供了所有必需的功能。

html

<input type="checkbox" id="chk1-label" name="RememberPreferences" />
<label for="chk1-label">Remember my preferences</label>

描述

原生的 HTML 复选框（<input type="checkbox">）表单控件有两种状态（“选中”或“未选中”），并且可以通过 JavaScript 设置 indeterminate 状态。类似地，具有 role="checkbox" 的元素可以通过 aria-checked 属性公开三种状态：true、false 或 mixed。

由于复选框是交互式控件，因此它必须是可聚焦且键盘可访问的。如果将该角色应用于不可聚焦的元素，请使用 tabindex 属性进行更改。激活复选框的预期键盘快捷键是 空格键。

开发者在激活复选框时，必须动态更改 aria-checked 属性的值。

所有后代都是展示性的

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

例如，考虑以下包含标题的 checkbox 元素：

html

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

由于 checkbox 的后代元素是表现性的，因此以下代码等效：

html

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

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

html

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

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

aria-checked

aria-checked 的值定义了复选框的状态。此属性有三个可能的值之一：

true: 复选框已选中。
false: 复选框未选中。
mixed: 复选框部分选中或不确定。

tabindex="0"

用于使其可聚焦，以便辅助技术用户可以制表到它并立即开始阅读。

键盘交互

键	Function
`空格`	激活复选框

必需的 JavaScript

所需的事件处理程序

onclick: 处理鼠标单击复选框和相关标签，通过更改 aria-checked 属性的值以及复选框的外观来更改复选框的状态，使其对可见用户显示为选中或未选中。
onKeyDown: 处理用户按下 空格键 以通过更改 aria-checked 属性的值以及复选框的外观来更改复选框的状态，使其对可见用户显示为选中或未选中。

示例

以下示例使用 CSS 和 JavaScript 创建了一个原本无语义的复选框元素，以处理元素的选中或未选中状态。

HTML

html

<span
  role="checkbox"
  id="chkPref"
  aria-checked="false"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label id="chk1-label">Remember my preferences</label>

CSS

css

[role="checkbox"] {
  padding: 5px;
}

[role="checkbox"]:focus {
  border: 2px solid #0198e1;
}

[aria-checked="true"]::before {
  content: "[x]";
}

[aria-checked="false"]::before {
  content: "[ ]";
}

JavaScript

const item = document.getElementById("chkPref");
const label = document.getElementById("chk1-label");

function changeCheckbox(code) {
  const checked = item.getAttribute("aria-checked");

  if (code && code !== "Space") {
    return;
  }
  if (checked === "true") {
    item.setAttribute("aria-checked", "false");
  } else {
    item.setAttribute("aria-checked", "true");
  }
}

item.addEventListener("keydown", (event) => {
  changeCheckbox(event.code);
});

label.addEventListener("keydown", (event) => {
  changeCheckbox(event.code);
});

item.addEventListener("click", changeCheckbox);
label.addEventListener("click", changeCheckbox);