ARIA：切换角色

ARIA switch 角色与 复选框 角色相同，只是它不是“选中”或“未选中”，而是“开启”或“关闭”。与 复选框 角色一样，aria-checked 属性是必需的。两个可能的值是 true 和 false。与 <input type="checkbox"> 或 role="checkbox" 不同，它没有“未确定”或“混合”状态。switch 角色不支持 aria-checked 属性的 mixed 值；如果将 mixed 值分配给 switch，则会将其值设置为 false。

辅助技术可能会选择使用专门的表示形式来表示 switch 小部件，以反映开/关开关的概念。

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

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

例如，考虑以下 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-checked 属性

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

aria-readonly 属性

aria-readonly 属性受 switch 角色支持。它指示用户是否可以编辑小部件的状态。false 值表示用户可以更改小部件的状态；true 值表示用户无法更改小部件的状态。默认值为 false。

单击事件处理程序

当用户单击开关小部件时，会触发 单击事件，必须处理该事件才能更改小部件的状态。

更改aria-checked 属性

当在开关小部件上触发单击事件时，处理程序必须将 aria-checked 属性的值从 true 更改为 false，反之亦然。

当 switch 角色添加到元素中时，用户代理 会以以下方式处理它

• 该元素在系统的无障碍基础结构中公开，具有 switch 角色。
• 当 aria-checked 属性的值发生变化时，如果可用，并且支持 switch 角色，系统会使用系统的无障碍 API 触发一个可访问的事件。
• 所有作为具有应用了 switch 角色的元素的后代的元素，都会自动分配 presentation 角色。这可以防止用于构建开关的元素被辅助技术单独交互。这些元素中的文本对于用户代理仍然可见，并且可能会被读取或以其他方式传递给用户，除非它使用 display: none 或 aria-hidden="true" 明确隐藏。

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

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

以下示例将帮助您了解如何应用和使用 switch 角色。

这个简单的示例只是创建一个部件并为其分配 ARIA switch 角色。按钮的样式类似于开/关电源开关。

HTML

这里的 HTML 非常简单。开关实现为一个 <button> 元素，该元素最初被选中，因为其 aria-checked 属性被设置为 "true"。开关有两个子元素，包含“关闭”和“打开”标签，并且后面跟着一个 <label> 来标识开关。

<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 代码定义并应用一个函数来处理开关部件上的点击事件。该函数将 aria-checked 属性从 true 更改为 false，反之亦然。

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

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 的目的是为开关建立一种外观，让人想起电源开关的范式。

button.switch {
  margin: 0;
  padding: 0;
  width: 70px;
  height: 26px;
  border: 2px solid black;
  display: inline-block;
  margin-right: 0.25em;
  line-height: 20px;
  vertical-align: middle;
  text-align: center;
  font:
    12px "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: #262;
  color: #eef;
}

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

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

最有趣的部分可能是属性选择器和 :first-child 和 :last-child 伪类的使用，它们负责根据开关是打开还是关闭来更改开关的外观。

结果

结果如下所示

• ARIA：复选框角色
• <input type="checkbox">
• aria-hidden