原生 checkbox 不应加 aria-checked，否则导致状态撕裂；仅当使用 <div role="checkbox"> 手写复选框时才需 JS 同步 aria-checked。隐藏原生控件须用 opacity:0 + absolute 定位，禁用 display:none；必须配语义化 label 嵌套；自定义 checkbox 需 tabindex、Space 键响应、aria-checked 同步及 aria-disabled 处理。
原生 checkbox 为什么不能加 aria-checked
加了就会状态撕裂——读屏器说“已选中”，但视觉和表单值仍是未勾选。浏览器自动同步 input[type="checkbox"] 的可访问状态，你手动设 aria-checked 反而覆盖了真实状态。常见错误是写成：<input type="checkbox" aria-checked="true">，这完全没必要，也破坏无障碍。
真正该用 aria-checked 的场景只有一个：你用 <div role="checkbox"> 完全手写了一个复选框。这时候它没原生行为，必须靠 JS 同步更新 aria-checked 值，否则读屏器压根不知道当前状态。
美化 checkbox 时怎么不丢可访问性
核心原则：隐藏原生控件，但不移除它；保留语义，不伪造语义。以下操作缺一不可：
- 用
opacity: 0; position: absolute; width: 1px; height: 1px;隐藏input[type="checkbox"]，绝不用display: none或visibility: hidden（会彻底从辅助技术中移除） - 必须配
<label>，且用嵌套结构：<label><input type="checkbox">我同意</label>，比for/id更可靠、更语义化 - 自定义样式层（比如
::before）要通过input:checked + .custom-checkmark或input:checked ~ .custom-checkmark控制，不能靠 JS 操控 class 模拟状态 - 焦点样式必须可见，用
:focus-visible而非:focus，避免鼠标用户看到冗余轮廓
自定义 checkbox（div + role）必须补哪些交互逻辑
只加 role="checkbox" 和 aria-checked 是半成品，键盘用户根本用不了。漏掉任一环节，就等于把人挡在门外：
立即学习“前端免费学习笔记（深入）”；
- 加
tabindex="0"让元素可聚焦，否则 Tab 键跳过它 - 监听
keydown，对Space键调用event.preventDefault()并翻转状态（不能只靠 click） - 每次状态变更后，必须同步更新 DOM 上的
aria-checked值（"true"或"false"），不能只改 class - 禁用时，设
aria-disabled="true"并移除tabindex，否则焦点能进却无响应 - 不要把
aria-checked放在<label>或<span>上——它只对带role="checkbox"的元素生效
label 关联失效的典型表现和修复点
用户点击文字没反应、读屏器报“无标签”、表单提交时值为空——八成是 <label> 没真正关联上。最常踩的坑：
-
for值和input的id大小写不一致，比如id="Agree"却写for="agree" - 用了
aria-labelledby替代真实<label>，它不触发表单提交，也不参与原生 focus 流程 - 把
input和label分开放在不同容器里，导致相邻兄弟选择器（~）失效，样式联动断掉 - 视觉隐藏 checkbox 时宽高设为
0但没设position: absolute，导致布局塌陷或点击热区偏移
复杂点在于：可访问性和视觉效果不是二选一，而是同一实现的两面。少写一行 tabindex，或漏掉一次 aria-checked 同步，对键盘或读屏器用户就是一道墙。
