role="switch"本身不触发播报，必须通过JavaScript同步更新aria-checked值才能使屏幕阅读器正确读出“已开启”或“已关闭”，否则可能读作“未定义”或跳过状态。
role="switch" 本身不触发播报，依赖 aria-checked 和状态变更
屏幕阅读器不会因为 role="switch" 就自动读“已开启/已关闭”，它只把元素识别为开关控件，实际播报内容完全取决于 aria-checked 的值和是否触发了状态变化事件。如果没设 aria-checked 或没用 JavaScript 同步更新，屏幕阅读器可能读成“未定义”或直接跳过状态。
-
aria-checked="true"→ 读作“已开启”，aria-checked="false"→ 读作“已关闭”（主流阅读器如 NVDA、VoiceOver、JAWS 均按此规则） - 必须用 JavaScript 手动切换
aria-checked值，不能只靠 CSS 伪类或 class 切换 - 推荐配合
aria-label或aria-labelledby提供明确的开关语义，比如aria-label="夜间模式"，否则只读“已开启”，用户不知道开的是什么
为什么纯 HTML + CSS 的 switch 经常不被正确播报
很多人用 <div role="switch"> + checkbox 隐藏 + 伪元素模拟视觉开关，但忘了绑定交互逻辑。这种写法在 DOM 中没有原生状态，aria-checked 不变，点击后屏幕阅读器听不到任何状态反馈，用户无法确认操作是否生效。
- 不要只监听
click事件并 toggle class —— 必须同步设置element.setAttribute('aria-checked', 'true') - 避免用
aria-hidden="true"包裹内部视觉指示器，否则可能干扰状态读取 - 若用
<input type="checkbox">，直接设role="switch"即可，浏览器会自动映射checked到aria-checked，但需确保没覆盖掉原生行为（例如阻止默认事件后没手动更新状态）
ChromeVox / VoiceOver / NVDA 在 focus 和 click 时的播报差异
不同阅读器对同一操作的响应节奏不同：VoiceOver 在聚焦时就报“夜间模式 已关闭”，点击后立刻重报“已开启”；ChromeVox 可能延迟半秒才刷新状态；NVDA 有时需要额外触发 aria-live 才能稳定播报变更。单纯依赖焦点变化不可靠。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 确保每次状态变更都显式调用
element.setAttribute('aria-checked', newValue) - 如需强提示，可加
aria-live="polite"的隐藏区域，用 JS 写入“夜间模式已开启”，但优先走标准aria-checked路径 - 测试时务必用真实阅读器（不止是 Lighthouse 检查），特别是禁用鼠标、纯键盘操作流程
常见错误：role="switch" 和 role="checkbox" 混用导致语义冲突
把一个元素同时设 role="switch" 和 role="checkbox" 是无效的——后者会被忽略，但更严重的是，某些旧版阅读器（如 IE11 + JAWS）可能因角色冲突完全跳过该元素。Switch 和 checkbox 在 ARIA 中语义不同：前者强调“物理开关”的二元状态（开/关），后者强调“勾选/取消勾选”的选择动作。
立即学习“前端免费学习笔记（深入）”；
- 别为了兼容性叠加 role ——
role="switch"在所有现代阅读器中支持良好（IE11 除外，需降级为role="checkbox"并加说明） - 不要给
role="switch"元素加aria-checked="mixed"—— switch 不支持中间态，会破坏语义 - 如果后台逻辑其实是多选集合中的一项（比如“启用通知”），用
role="switch"比role="checkbox"更准确，但前提是 UI 确实呈现为开关样式且行为符合直觉
aria-checked 就得跟着变 —— 少一次 setAttribute，用户就可能以为点错了。 
