ARIA：复选框角色

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"

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

键盘交互

键 功能
空格 激活复选框

所需的 JavaScript

所需的事件处理程序

onclick

处理复选框和关联标签上的鼠标单击，这将通过更改 aria-checked 属性的值和复选框的外观来更改复选框的状态，使其在视觉上显示为选中或未选中

onKeyDown

处理用户按下 空格键 以更改复选框状态的情况，方法是更改 aria-checked 属性的值以及复选框的外观，使其在视觉上显示为选中或未选中

示例

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

HTML

html
<span
  role="checkbox"
  id="chkPref"
  aria-checked="false"
  onclick="changeCheckbox()"
  onKeyDown="changeCheckbox(event.code)"
  tabindex="0"
  aria-labelledby="chk1-label"></span>
<label
  id="chk1-label"
  onclick="changeCheckbox()"
  onKeyDown="changeCheckbox(event.code)"
  >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

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

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

无障碍问题

当 checkbox 角色添加到元素时，用户代理应执行以下操作

  • 在操作系统的无障碍 API 中公开元素具有 checkbox 角色。
  • 当 aria-checked 值更改时，发送一个无障碍状态更改事件。

辅助技术产品应执行以下操作

  • 屏幕阅读器应将元素宣布为复选框，并可选地提供有关如何激活它的说明。

实施复选框的人员应执行以下操作

  • 确保复选框可以通过键盘控件和单击来访问和交互
  • 在用户交互后保持 aria-checked 属性的最新状态
  • 提供指示复选框获得焦点时的样式。

注意：关于辅助技术如何处理此技巧，观点可能存在分歧。以上提供的信息仅是其中一种观点，可能会发生变化。

最佳实践

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

另请参阅