构建无障碍组件之Switch Pattern

Switch Pattern 详解：构建无障碍开关组件

开关（Switch）是一种模拟物理开关的控件，用于在两个状态（通常是"开"和"关"）之间切换。在一些 UI 组件库中，它也被称为 Toggle（切换开关）。本文基于 W3C WAI-ARIA Switch Pattern 规范，详解如何构建无障碍的开关组件。

一、Switch 的定义与核心概念

1.1 什么是 Switch

Switch 是一种特殊的二元状态控件，它：

模拟物理开关的行为
在两个互斥状态之间切换（开/关、启用/禁用）
与 Checkbox 不同，Switch 的状态改变通常会立即生效，无需提交表单

1.2 Switch 与 Checkbox 的区别

特性	Switch	Checkbox
视觉表现	滑动开关样式	方框勾选样式
状态语义	开/关（On/Off）	选中/未选中（Checked/Unchecked）
操作反馈	通常立即生效	通常需要提交表单
使用场景	设置项切换、功能启用/禁用	多选项选择、表单提交
ARIA 角色	role="switch"	role="checkbox"

1.3 何时使用 Switch

适合使用 Switch 的场景：

系统设置（如：开启/关闭通知）
功能启用（如：启用暗黑模式）
即时生效的选项（如：开启/关闭 WiFi）

适合使用 Checkbox 的场景：

表单中的多选项
需要提交后才生效的选择
列表中的批量选择

二、原生 HTML Switch 实现

HTML5.2 起，<input type="checkbox"> 新增了 switch 属性，可以直接创建原生 Switch：

1<label>
2  开启通知
3  <input
4    type="checkbox"
5    role="switch" />
6</label>
7

2.1 原生 Switch 的浏览器支持

目前原生 Switch 的支持情况：

Safari：完全支持（包括 iOS Safari）
Chrome/Edge：需要通过 CSS 自定义样式
Firefox：需要通过 CSS 自定义样式

由于跨浏览器兼容性考虑，实际项目中通常使用自定义样式实现。

三、WAI-ARIA 角色与属性

3.1 基本角色

Switch 具有 role="switch"。

3.2 状态属性

aria-checked="true"：开关处于"开"状态
aria-checked="false"：开关处于"关"状态

注意：Switch 只支持 true 和 false 两种状态，不支持 mixed（与 Checkbox 不同）。

3.3 可访问标签

Switch 的可访问标签可以通过以下方式提供：

可见文本内容：直接包含在具有 role="switch" 的元素内的文本
aria-labelledby：引用包含标签文本的元素的 ID
aria-label：直接在开关元素上设置标签文本

1<!-- 方式一：可见文本内容 -->
2<div
3  role="switch"
4  aria-checked="false">
5  开启通知
6</div>
7
8<!-- 方式二：aria-labelledby -->
9<span id="wifi-label">WiFi</span>
10<div
11  role="switch"
12  aria-checked="true"
13  aria-labelledby="wifi-label"></div>
14
15<!-- 方式三：aria-label -->
16<div
17  role="switch"
18  aria-checked="false"
19  aria-label="开启暗黑模式"></div>
20

3.4 描述属性

如果包含额外的描述性静态文本，使用 aria-describedby：

1<div
2  role="switch"
3  aria-checked="false"
4  aria-describedby="airplane-desc">
5  飞行模式
6</div>
7<p id="airplane-desc">关闭所有无线连接</p>
8

四、键盘交互规范

当 Switch 获得焦点时：

按键	功能
Space	切换开关状态（开 ↔ 关）
Enter（可选）	某些实现中也支持切换开关状态

五、实现方式

5.1 原生 HTML + CSS 实现

1<label class="switch">
2  <input
3    type="checkbox"
4    role="switch" />
5  <span class="slider"></span>
6  开启通知
7</label>
8
9<style>
10  .switch {
11    display: flex;
12    align-items: center;
13    gap: 12px;
14    cursor: pointer;
15  }
16
17  .switch input {
18    appearance: none;
19    width: 48px;
20    height: 24px;
21    background: #ccc;
22    border-radius: 12px;
23    position: relative;
24    cursor: pointer;
25    transition: background 0.3s;
26  }
27
28  .switch input::after {
29    content: '';
30    position: absolute;
31    width: 20px;
32    height: 20px;
33    background: white;
34    border-radius: 50%;
35    top: 2px;
36    left: 2px;
37    transition: transform 0.3s;
38  }
39
40  .switch input:checked {
41    background: #005a9c;
42  }
43
44  .switch input:checked::after {
45    transform: translateX(24px);
46  }
47
48  .switch input:focus {
49    outline: 2px solid #005a9c;
50    outline-offset: 2px;
51  }
52</style>
53

5.2 ARIA 实现（自定义样式）

1<div
2  role="switch"
3  tabindex="0"
4  aria-checked="false"
5  aria-labelledby="switch-label"
6  onclick="toggleSwitch(this)"
7  onkeydown="handleKeydown(event, this)">
8  <span class="switch-track">
9    <span
10      class="switch-thumb"
11      aria-hidden="true"></span>
12  </span>
13  <span id="switch-label">开启通知</span>
14</div>
15
16<script>
17  function toggleSwitch(switchEl) {
18    const isChecked = switchEl.getAttribute('aria-checked') === 'true';
19    switchEl.setAttribute('aria-checked', !isChecked);
20  }
21
22  function handleKeydown(event, switchEl) {
23    if (event.key === ' ') {
24      event.preventDefault();
25      toggleSwitch(switchEl);
26    }
27  }
28</script>
29
30<style>
31  [role='switch'] {
32    display: flex;
33    align-items: center;
34    gap: 12px;
35    cursor: pointer;
36  }
37
38  .switch-track {
39    width: 48px;
40    height: 24px;
41    background: #ccc;
42    border-radius: 12px;
43    position: relative;
44    transition: background 0.3s;
45  }
46
47  [role='switch'][aria-checked='true'] .switch-track {
48    background: #005a9c;
49  }
50
51  .switch-thumb {
52    position: absolute;
53    width: 20px;
54    height: 20px;
55    background: white;
56    border-radius: 50%;
57    top: 2px;
58    left: 2px;
59    transition: transform 0.3s;
60  }
61
62  [role='switch'][aria-checked='true'] .switch-thumb {
63    transform: translateX(24px);
64  }
65
66  [role='switch']:focus {
67    outline: 2px solid #005a9c;
68    outline-offset: 2px;
69  }
70</style>
71

六、常见应用场景

6.1 系统设置项

1<fieldset>
2  <legend>通知设置</legend>
3
4  <label>
5    <div>
6      <span>推送通知</span>
7      <p>接收应用推送消息</p>
8    </div>
9    <input type="checkbox" checked />
10  </label>
11
12  <label>
13    <div>
14      <span>邮件通知</span>
15      <p>接收每日摘要邮件</p>
16    </div>
17    <input type="checkbox" />
18  </label>
19
20  <label>
21    <div>
22      <span>短信通知</span>
23      <p>接收重要提醒短信</p>
24    </div>
25    <input type="checkbox" checked />
26  </label>
27</fieldset>
28

6.2 功能开关

1<div>
2  <label>
3    <div>
4      <span>🌙</span>
5      <div>
6        <span>暗黑模式</span>
7        <p>使用深色主题保护眼睛</p>
8      </div>
9    </div>
10    <input type="checkbox" />
11  </label>
12
13  <label>
14    <div>
15      <span>🔒</span>
16      <div>
17        <span>自动锁定</span>
18        <p>闲置 5 分钟后自动锁定</p>
19      </div>
20    </div>
21    <input type="checkbox" checked />
22  </label>
23</div>
24

6.3 隐私设置

1<fieldset>
2  <legend>隐私设置</legend>
3
4  <label>
5    <div>
6      <span>公开个人资料</span>
7      <p>允许其他用户查看您的资料</p>
8    </div>
9    <input type="checkbox" />
10  </label>
11
12  <label>
13    <div>
14      <span>显示在线状态</span>
15      <p>让好友知道您在线</p>
16    </div>
17    <input type="checkbox" checked />
18  </label>
19
20  <label>
21    <div>
22      <span>允许搜索到我</span>
23      <p>通过用户名搜索可以找到您</p>
24    </div>
25    <input type="checkbox" checked />
26  </label>
27</fieldset>
28

七、最佳实践

7.1 优先使用原生 Checkbox

原生 HTML <input type="checkbox"> 配合 CSS 样式是最可靠的方式，它自动继承了浏览器的无障碍特性。

7.2 提供清晰的标签

始终为 Switch 提供清晰的标签，说明开关控制的功能：

1<!-- 推荐 -->
2<label>
3  <span>开启自动保存</span>
4  <input type="checkbox" />
5</label>
6
7<!-- 不推荐：没有标签或标签不清晰 -->
8<input type="checkbox" />
9<span>开启</span>
10

7.3 使用描述文本

对于复杂的设置项，提供额外的描述文本：

1<label>
2  <div>
3    <span>数据同步</span>
4    <p>自动将数据备份到云端</p>
5  </div>
6  <input type="checkbox" />
7</label>
8

7.4 避免在 Switch 上嵌套其他交互元素

1<!-- 不推荐 -->
2<label>
3  <input type="checkbox" />
4  开启功能 <a href="/help">了解更多</a>
5</label>
6
7<!-- 推荐 -->
8<div>
9  <div>
10    <span>开启功能</span>
11    <a href="/help">了解更多</a>
12  </div>
13  <input type="checkbox" />
14</div>
15

7.5 状态反馈

确保用户能够清楚地看到开关的当前状态：

使用颜色变化表示开关状态（如：蓝色表示开启，灰色表示关闭）
提供焦点样式以便键盘用户识别
禁用状态使用较低的透明度并禁用鼠标交互

7.6 移动端触摸区域

确保 Switch 有足够的触摸区域（至少 44x44px），可以通过增加 padding 或增大开关尺寸实现。

八、Switch、Checkbox 与 Radio 的选择

场景	推荐组件	原因
即时生效的设置项	Switch	模拟物理开关，立即反馈
表单中的多选项	Checkbox	需要提交后才生效
单选场景	Radio	互斥选择
列表中的批量操作	Checkbox	支持多选

九、总结

Switch 是一种直观的状态切换控件，适用于需要即时反馈的设置场景。与 Checkbox 相比，Switch 更强调"开/关"的语义，通常用于控制功能的启用和禁用。

构建无障碍的 Switch 组件需要注意：使用正确的 ARIA 角色（role="switch"）、提供清晰的标签、确保键盘可访问性（Space 键切换），以及为屏幕阅读器用户提供准确的状态反馈。

开发者应优先使用语义化的 HTML 元素，确保所有用户都能顺畅地使用开关功能。

文章同步于 an-Onion 的 Github。码字不易，欢迎点赞。

《构建无障碍组件之Switch Pattern》是转载文章，点击查看原文。