ARIA：switch 角色

描述

ARIA 的 switch 角色与 checkbox 角色相同，不同之处在于，它不是“已选中”或“未选中”，而是“开启”或“关闭”。与 checkbox 角色一样，aria-checked 属性是必需的。两个可能的值是 true 和 false。与 <input type="checkbox"> 或 role="checkbox" 不同，它没有 indeterminate 或 mixed 状态。switch 角色不支持 aria-checked 属性的 mixed 值；将 mixed 值赋给 switch 会将其值设置为 false。

辅助技术可能会选择使用专门的呈现方式来显示 switch 控件，以反映其开关的开启/关闭概念。

由于开关是一种交互式控件，因此它必须是可聚焦的并且可以通过键盘进行访问。如果将该角色应用于不可聚焦的元素，请使用 tabindex 属性进行更改。用于切换开关值的预期键盘快捷键是 空格键。开发者需要动态更改 aria-checked 属性的值，当开关被切换时。

所有后代都是展示性的

有些用户界面组件，当在平台辅助功能 API 中表示时，只能包含文本。辅助功能 API 无法表示 switch 中包含的语义元素。为了处理这种限制，浏览器会自动为任何 switch 元素的所有后代元素应用 presentation 角色，因为该角色不支持语义子元素。

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

<div role="switch"><h3>Title of my switch</h3></div>

由于 switch 的后代元素是呈现性的，因此以下代码等效

<div role="switch"><h3 role="presentation">Title of my switch</h3></div>

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

<div role="switch">Title of my switch</div>

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

aria-checked 属性

使用 switch 角色时，aria-checked 属性是必需的，因为它表示应用于 switch 角色的控件的当前状态。true 值表示“开启”状态；false 值表示“关闭”状态；switch 角色不支持 mixed 值，并将其视为 false。

aria-readonly 属性

switch 角色支持 aria-readonly 属性。它指示控件的状态是否可由用户编辑。false 值意味着用户可以更改控件的状态；true 值意味着用户不能更改控件的状态。默认值为 false。

所需的 JavaScript 功能

点击事件的处理器

当用户点击 switch 控件时，会触发一个 click 事件，必须处理该事件以更改控件的状态。

更改 aria-checked 属性

当在 switch 控件上触发 click 事件时，处理器必须将 aria-checked 属性的值从 true 更改为 false，或反之亦然。

对用户代理和辅助技术的可能影响

当 switch 角色被添加到元素时，用户代理会这样处理它

• 该元素以 switch 角色形式暴露给系统的辅助功能基础设施。
• 当 aria-checked 属性的值发生更改时，如果系统辅助功能 API 可用且支持 switch 角色，则会使用该 API 触发可访问事件。
• 应用于 switch 元素的所有后代元素都会自动被分配 presentation 角色。这可以防止用于构建 switch 的元素被辅助技术单独交互。这些元素中的文本对用户代理仍然可见，并且可以被读取或以其他方式传递给用户，除非它们被明确隐藏（使用 display: none 或 aria-hidden="true"）。

如果辅助技术支持 switch 角色，它会通过执行以下操作来响应：

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

示例

以下示例应有助于您理解如何应用和使用 switch 角色。

在 ARIA 中添加 switch 角色

此示例创建了一个控件，并为其分配了 ARIA switch 角色。该按钮通过其 aria-checked 属性设置为 "true" 来实现最初的选中状态，并具有类似于开启/关闭电源开关的外观。

HTML

switch 被实现为一个 <button> 元素，该元素因其 aria-checked 属性设置为 "true" 而最初被选中。switch 包含两个子元素，用于显示“关闭”和“开启”标签，后面跟着一个 <label> 来标识该 switch。

<button role="switch" aria-checked="true" id="speakerPower" class="switch">
  <span>off</span>
  <span>on</span>
</button>
<label for="speakerPower" class="switch">Speaker power</label>

JavaScript

此 JavaScript 代码定义并应用了一个函数来处理 switch 控件的点击事件。该函数将 aria-checked 属性从 true 更改为 false，或反之亦然。

document.querySelectorAll(".switch").forEach((theSwitch) => {
  theSwitch.addEventListener("click", handleClickEvent);
});

function handleClickEvent(evt) {
  const el = evt.target;

  if (el.getAttribute("aria-checked") === "true") {
    el.setAttribute("aria-checked", "false");
  } else {
    el.setAttribute("aria-checked", "true");
  }
}

CSS

CSS 的目的是为 switch 建立一个类似于电源开关范例的外观和感觉。

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  vertical-align: middle;
  text-align: center;
  font:
    12px / 20px "Open Sans",
    "Arial",
    serif;
}

button.switch span {
  padding: 0 4px;
  pointer-events: none;
}

[role="switch"][aria-checked="false"] :first-child,
[role="switch"][aria-checked="true"] :last-child {
  background: #226622;
  color: #eeeeff;
}

[role="switch"][aria-checked="false"] :last-child,
[role="switch"][aria-checked="true"] :first-child {
  color: #bbbbdd;
}

label.switch {
  font:
    16px "Open Sans",
    "Arial",
    sans-serif;
  line-height: 20px;
  vertical-align: middle;
  user-select: none;
}

最有趣的部分可能是使用属性选择器以及 :first-child 和 :last-child 伪类来完成根据其开启或关闭状态改变 switch 外观的所有繁重工作。

结果

结果如下所示

规范

另见

• ARIA: checkbox 角色
• <input type="checkbox">
• aria-hidden