如何让自定义 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% 的问题就解决了。
