必须用原生<input type="checkbox">而非role="switch"，仅当无法使用原生控件时才手动实现；role="switch"需严格配齐aria-checked、tabindex="0"及键盘事件监听，否则无障碍功能失效。
用 role="switch" 前必须确认你不用原生 <input type="checkbox">
直接用 <input type="checkbox"> 是最安全、最无障碍的开关实现方式——它自带 role="checkbox"、自动同步 aria-checked、支持空格键切换、能被表单提交捕获。只有当你**无法使用原生 checkbox**（比如设计要求滑块必须是纯 div + span，且不能包裹 input），才考虑手动实现 role="switch"。强行给 <input type="checkbox"> 加 role="switch" 会覆盖原生语义，导致屏幕阅读器误报“开关”，但空格键失效、状态不同步、表单不提交。
role="switch" 必须配齐三要素：状态、焦点、键盘响应
只写 role="switch" 等于没写。辅助技术看到这个 role，就默认这是一个可交互的开关控件，但若缺少以下三项，它只会读作“开关”，不报状态、无法聚焦、按空格无反应：
-
aria-checked="true"或"false"—— 动态反映当前开/关状态，不能靠 class 或 data-* 属性代替 -
tabindex="0"—— 让元素可被键盘聚焦（不能用tabindex="-1"） - 监听
keydown事件，对Space键触发状态翻转，并同步更新aria-checked和视觉样式
示例结构：
<div role="switch" aria-checked="false" tabindex="0">
<span class="switch-track">
<span class="switch-thumb"></span>
</span>
</div>注意：该 div 不能有 aria-label 或 aria-labelledby 缺失——必须提供明确名称，例如 aria-label="启用深色模式"。
立即学习“前端免费学习笔记（深入）”；
视觉隐藏原生 input 时，别用 display: none 或 visibility: hidden
如果你选择“视觉上用 div 实现滑块，但背后仍保留原生 <input type="checkbox">”（推荐做法），那原生 input 必须保留在 DOM 中、可聚焦、可被 AT 暴露：
- ✅ 正确隐藏方式：
position: absolute; opacity: 0; width: 1px; height: 1px;—— 元素仍在 tab 序列中，状态变更自动广播 - ❌ 绝对禁用：
display: none、visibility: hidden、aria-hidden="true"—— 屏幕阅读器完全感知不到控件 - ❌ 不要加
tabindex="-1"—— 它会破坏原生 tab 顺序，且让空格键失效
此时外层 label 的 for 必须严格匹配 input 的 id，大小写敏感；不要用 aria-labelledby 替代真实 <label>，否则点击 label 不触发 input、也不触发表单提交。
滑块尺寸与焦点环容易被忽略
WCAG 2.5.5 要求触控目标最小为 44×44px，这指的是整个可点击区域（包括 label 包裹范围），不是滑块本身。很多开发者只调大滑块 thumb，却忘了扩大 track 或 label 的点击热区。
焦点样式也常出错：
- 用
:focus-visible替代:focus，避免鼠标用户看到冗余轮廓 - 确保焦点轮廓清晰可见（尤其在高对比度模式下），不能被
outline: none彻底移除 - 如果用了自定义 focus 样式，需测试 Windows 高对比主题是否仍可识别
真正难的不是写出 role="switch"，而是让它的行为、状态、焦点、尺寸、命名全部同步且稳定——少一个环节，视障用户就可能卡在“知道有个开关，但不知道它开着还是关着，也无法操作”。
