高可访问性重构应保留原生checkbox/radio语义，通过css隐藏input并用关联label提供大点击区和状态反馈，而非用aria模拟；radio分组依赖name属性严格一致；三态需js设置indeterminate=true。
标准 <input type="checkbox"> 和 <input type="radio"> 本身语义正确、键盘可用、屏幕阅读器支持良好——但它们的交互缺陷（小点击区域、依赖视觉定位、无状态反馈）在真实场景中仍会阻断大量用户。高可访问性重构不是替换它们，而是用原生语义为基底，包裹更健壮的交互层。
为什么不能只靠 ARIA role="checkbox" 模拟复选框
很多人试图用 <div role="checkbox"> + <code>aria-checked + 手动监听点击/空格/Enter 来“重做”复选框，这反而引入新问题：
- 失去原生表单提交能力：
<form></form>提交时，自定义div不会自动序列化值 - 焦点管理失控：需手动实现
tabindex、focus()、blur()，且容易与屏幕阅读器焦点环不同步 - 不响应系统级设置：比如 macOS 的“按下空格键切换复选框”偏好，或 Windows 的高对比度模式下默认样式覆盖
- 移动端 touch 事件未对齐：原生
input自动处理touchstart/click延迟和误触，模拟组件需额外防抖
重构核心：用原生 input 隐藏 + 可见标签接管交互
真正稳健的做法是保留 <input type="checkbox"> 或 <input type="radio">，仅用 CSS 将其视觉隐藏（不设 display: none 或 visibility: hidden，否则会脱离可访问树），再通过关联的 <label></label> 提供大点击区和清晰状态反馈。
关键代码结构如下：
<div class="custom-checkbox">
<input type="checkbox" id="terms" name="agree" value="yes"><label for="terms">
<span class="checkmark"></span>
我已阅读并同意服务条款
</label>
</div>
其中：
- input 必须有 id，且 label 的 for 属性必须严格匹配
- checkmark 是纯视觉元素，不参与语义；它的状态（如加勾、变色）应通过 CSS 选择器 .custom-checkbox input:checked + label .checkmark 控制
- 不要给 label 设 tabindex：它已天然可聚焦，添加后反而破坏顺序
radio 组的 name 与 groupname 必须一致且不可省略
在 HTML 中，<input type="radio"> 的互斥逻辑完全由 name 属性驱动。常见错误是：
- 各 radio 的
name值拼写不一致（如gendervsgendre），导致全部可同时选中 - 使用 JavaScript 动态生成时，忘记为每个 radio 设置
name，或赋值为undefined - 在 Vue/React 中，误将
name绑定为动态变量但未保证全组相同（例如:name="`option-${index}`"）
验证方法很简单：打开 DevTools，在 Elements 面板中检查所有 radio 元素，确认它们的 name 属性值完全一致。这是唯一生效的分组机制，aria-labelledby 或 CSS 类名都不起作用。
三态复选框（indeterminate）必须用 JS 主动设置
HTML 原生不支持 indeterminate 状态的声明式写法。checked 属性只能表达 true/false，而“半选中”是纯 JS 控制的状态：
- 必须通过 JS 设置
input.indeterminate = true（注意：不是设置属性，是设置 DOM 属性） - 设置后，
input.checked仍为false，但视觉上显示横杠；此时用户点击会先变为checked = true，再点才变回false - 若用 Vue 的
v-model或 React 的checkedprop，需额外监听并同步indeterminate状态，否则切换会丢失
典型场景是树形结构的父节点：子项全选 → 父节点 checked = true；全不选 → checked = false；部分选中 → indeterminate = true 且 checked = false。这个逻辑不能交给 CSS 或模板引擎推导。
最易被忽略的是：所有视觉增强（大点击区、动画、图标切换）都必须严格跟随原生 input 的状态变化，而不是反过来。一旦你监听了 label 的点击却忘了触发 input.click()，或者用 JS 改变了 indeterminate 却没同步更新 UI 样式，可访问性就断在了第一环。
