原生+组合即可满足WCAG 2.1 AA级对开关的绝大多数要求，因其自带焦点管理、Space键切换、实时aria-checked同步及屏幕阅读器稳定支持，无需手动实现role="switch"带来的兼容性与维护风险。
直接用 <input type="checkbox"> + <label></label> 组合，就能满足 WCAG 2.1 AA 级对开关（switch）的绝大多数要求；自定义视觉样式无需重写语义结构，更安全、更省事。
为什么不用 role="switch" 手动实现
手动用 div + role="switch" + aria-checked 虽然技术上可行，但容易漏掉关键细节：比如焦点管理不闭环、键盘操作（Space 键切换）未监听、状态同步延迟导致屏幕阅读器误报。而原生 <input type="checkbox"> 自带这些行为，浏览器保障一致性和兼容性。
- 所有主流屏幕阅读器（NVDA、VoiceOver、JAWS）对原生 checkbox 的 switch 语义识别稳定
- 自动支持 Tab 进入、Space 切换、
aria-checked实时同步，无需额外 JS - 移动端触控反馈、高对比模式适配、暗色模式继承等由系统接管
- 避免因 tabindex="-1" 或 focus() 调用不当引发的焦点丢失问题
正确 HTML 结构与 label 关联
必须用显式 <label for="id"></label> 或包裹式 <label><input>...</label>，否则点击文字区域无法触发控件——这是最常见的可访问性断裂点。
<label class="switch"> <input type="checkbox" id="dark-mode-toggle" name="dark-mode"><span class="switch-track"><span class="switch-thumb"></span></span> <span class="switch-label">启用深色模式</span> </label>
-
id和for值必须严格匹配（大小写敏感） - 不要用
aria-labelledby替代真实<label></label>—— 它不触发表单提交或原生 focus 行为 - 视觉隐藏文字（如“开启/关闭”）应保留在 DOM 中，用
sr-only类而非aria-hidden="true"
CSS 自定义样式的关键限制
视觉替换必须保留原生控件的可聚焦性与语义暴露，不能用 display: none 或 visibility: hidden 隐藏 <input>。
- 推荐用
position: absolute; opacity: 0; width: 1px; height: 1px;将原生控件移出视口但保留在 tab 序列中 - 不要给
<input>设置tabindex="-1"—— 它会破坏原生 tab 顺序 - 用
:focus-visible而非:focus控制焦点环，避免鼠标用户看到冗余轮廓 - 确保开关滑块的宽高 ≥ 44×44px（WCAG 2.5.5 触控目标最小尺寸）
动态状态与 aria-live 的误用风险
原生 checkbox 的状态变更会自动被屏幕阅读器捕获，**不需要**额外加 aria-live 区域播报；强行添加反而会造成重复播报或打断当前语音流。
- 仅当开关触发异步副作用（如 API 请求完成、页面主题切换完毕）时，才在结果区域使用
<div aria-live="polite"> <li>不要在 <code><input>上写aria-live—— 浏览器会忽略，且违反 ARIA 实践指南 - 若需提供更丰富的状态描述（如“深色模式已启用，下次刷新生效”），应通过
aria-describedby指向一个静态说明元素
真正难的不是让开关“看起来像开关”，而是确保它在任意辅助技术下行为一致、状态可信、焦点可控——原生语义是唯一被全平台验证过的路径。视觉定制永远只是表层，语义和交互才是无障碍的底盘。
