switch

使用时机

适用于”开启”和”关闭”比”已选中”和”未选中”更能准确描述状态的二态设置控件——例如 Wi-Fi、深色模式、通知开关、飞行模式。由于 HTML 目前没有原生开关元素，有两种有效实现方式：

1. <button type="button" role="switch" aria-checked="false"> — 首选，因为可继承原生按钮的焦点管理和激活行为。
2. <input type="checkbox" role="switch"> — 同样可接受；表单提交仍正常工作，role 覆盖会改变辅助技术的播报方式。

不要将 role="switch" 用于非真正二态的控件。若该操作会触发导航、打开菜单或启动某个流程，请改用 button 或 link。

键盘与焦点规范

根据 APG 开关模式：

• Tab 键将焦点移至开关。
• Space 键切换 aria-checked。Enter 键同样应切换（APG 建议两者均支持，因为用户对基于按钮的开关有类似按钮的预期行为）。
• 切换后焦点保持在开关上。

开关上的 aria-checked 仅接受 "true" 或 "false"——"mixed" 在此处无效。

常见错误

• 首次渲染时 role="switch" 缺少 aria-checked——该状态为必填项。
• 在开关上使用 aria-checked="mixed"——此值仅对复选框有效。
• 使用 aria-pressed 代替 aria-checked——aria-pressed 适用于切换按钮（如静音/取消静音），表示按钮执行了某个动作；开关表示的是设置状态。
• 仅通过 CSS 切换视觉样式，而未同步更新 aria-checked。
• 开关点击区域过小，不满足 WCAG 2.5.8 目标尺寸要求——交互区域必须达到 24×24 CSS 像素。

示例

<button
  type="button"
  role="switch"
  aria-checked="false"
  onclick="
    const next = this.getAttribute('aria-checked') === 'true' ? 'false' : 'true';
    this.setAttribute('aria-checked', next);
  "
>
  Dark mode
</button>