role="switch"仅提供语义标识，必须配合aria-checked、键盘事件处理和焦点管理才能实现可访问的开关功能；原生checkbox更推荐，因其自带语义、交互和状态同步。
role="switch" 是 ARIA 规范中定义的一个语义角色，用于标识一个可切换状态（开/关）的控件，但它本身不提供任何行为或样式 —— 它只是告诉辅助技术“这是一个开关”，而具体交互逻辑、视觉反馈、状态管理全得你手写。
为什么不能只加 role="switch" 就完事？
浏览器不会因为加了这个 role 就自动变成可点击、可键盘操作、可读取状态的开关。它只是个“标签”，不是“组件”。常见错误是：
- 只写
<div role="switch">灯光</div>，没绑定aria-checked，屏幕阅读器读不出当前是“开”还是“关” - 没处理
Enter/Space键响应，键盘用户无法操作 - 没监听点击或键盘事件去翻转状态，导致语义和实际状态脱节
role="switch" 必须配 aria-checked
aria-checked 是强制配套属性，用来同步表达当前开关状态。它的值只能是 "true"、"false" 或 "mixed"（后者极少用于 switch，多见于 checkbox 树形节点）。
示例正确写法：
立即学习“前端免费学习笔记（深入）”；
智能模型自动切换 V5.0.2 - 多模态感知，自动识别图片/视频/音频/代码/文本任务，切换最优模型。支持图片理解(qwen3-vl-plus)、视频音频(qwen3.5-plus)、代码(glm-5)、Office文档(MiniMax-M2.5)、推理等场景。零感知切换，无需手动操作。
<button role="switch" aria-checked="false" tabindex="0">蓝牙</button>
注意：tabindex="0" 是为了让它能被键盘聚焦；每次状态变化后，必须手动更新 aria-checked 的值，否则辅助技术会误读。
用原生 <input type="checkbox"> 更简单？
绝大多数情况下，是的。原生复选框在语义、键盘支持（空格切换）、状态同步、表单提交、甚至默认高对比度模式适配上都开箱即用。只需加点 CSS 改成视觉上的“滑动开关”即可：
<input type="checkbox" id="dark-mode"><label for="dark-mode">深色模式</label>
然后用 CSS 隐藏原生控件 + 自定义伪元素做滑块。这样既保语义又省维护成本。只有当你无法修改 HTML 结构（比如受限于第三方 UI 库渲染逻辑），才考虑手写 role="switch"。
真正容易被忽略的是：哪怕用了 role="switch"，如果没同步更新 aria-checked、没处理键盘事件、没做焦点管理，它对残障用户来说就和普通文字没区别 —— 语义标签不是装饰，是契约。
