如何让自定义 checkbox 和 radio 被屏幕阅读器正确识别

应保留原生 checkbox/radio 元素，用 CSS 视觉隐藏（如 opacity: 0 + absolute 定位）而非 display: none；通过 label 包裹或 for 属性关联自定义外观；确保键盘聚焦、Space 切换、屏幕阅读器正确播报状态。

要让自定义 checkbox 和 radio 被屏幕阅读器正确识别，核心是保留语义结构、确保可访问性属性完整，并避免破坏原生交互逻辑。不能只靠视觉替换，而要兼顾 ARIA 规范与浏览器的无障碍支持机制。

保持原生 或 元素

自定义样式时，不要移除或隐藏原生 input，而是通过 CSS 将其视觉上“透出”（例如用 opacity: 0、position: absolute; left: -9999px），同时保证它仍可聚焦、可操作、在 DOM 中存在且未被 display: none 或 visibility: hidden 移除。

• display: none 和 visibility: hidden 会让屏幕阅读器完全忽略该元素 —— 必须避免
• 推荐用 clip-path: inset(50%) 或 position: absolute; opacity: 0; width: 1px; height: 1px; 实现“视觉隐藏但语义保留”
• 确保它和自定义外观控件（如伪元素或 span）处于同一标签组中，便于关联

用 for 属性或 包裹实现点击穿透

用户点击自定义外观区域时，必须能触发原生 input 的选中/取消行为。最可靠方式是使用语义化 label 关联：

• 给 input 设置 id，label 用 for="xxx" 指向它
• 或者直接把 input 套在 内部（隐式关联），更简洁不易出错
• 这样点击 label 文本或自定义视觉区域，都会触发 input 的 click 事件，屏幕阅读器也能正确播报“复选框”“已选中”等状态

为自定义视觉部分添加必要的 ARIA 属性（仅当需要）

如果自定义外观是独立渲染（比如用 div + icon 模拟），且无法或不打算保留原生 input，则必须手动补全语义：

• 添加 role="checkbox" 或 role="radio"
• 用 aria-checked="true"/"false"/"mixed" 同步反映当前状态（需 JS 维护）
• 用 aria-labelledby 或 aria-label 提供可读名称
• 确保键盘可聚焦（tabindex="0"）并监听 Space 键切换状态
• ⚠️ 注意：这种方式维护成本高、兼容性弱，优先推荐保留原生 input

测试关键可访问性行为

完成实现后，务必验证以下几点：

• 用键盘 Tab 可聚焦到控件，按 Space 切换状态
• 屏幕阅读器（NVDA、VoiceOver、JAWS）能准确播报控件类型、名称、当前状态（如“接受条款，复选框，已勾选”）
• 鼠标点击自定义区域可正常触发选中，且状态同步更新
• 表单提交时，原生 input 的 value 正常参与序列化（尤其 radio 组要注意 name 一致）

不复杂但容易忽略：可访问性不是加个 aria-label 就完

事，而是从结构、行为、状态三个层面保持与原生控件一致。保留 input、用 label 关联、避免 display:none，这三步做到，90% 的问题就解决了。