原生 应使用 checked 属性表达状态，aria-checked 无效且不应使用；它仅适用于自定义复选框组件（如 ），需配合 role="checkbox" 及手动同步 aria-checked 值。
aria-checked 不是给原生 <input type="checkbox"> 用的
直接在 <input type="checkbox"> 上写 aria-checked 不会生效，浏览器会忽略它。因为原生复选框已有内置语义和状态管理机制，aria-checked 是为**自定义复选框组件**（比如用 <div> + CSS 模拟的）设计的替代方案，用来向屏幕阅读器暴露“已选中/未选中/半选中”状态。
<h3>原生复选框该用什么属性表达状态</h3>
<p>原生复选框只认 <code>checked 属性（布尔属性，存在即选中），它的当前选中状态由 DOM 的 element.checked 值决定，屏幕阅读器自动读取这个值并播报“已勾选”或“未勾选”。不需要、也不应该手动加 aria-checked。
-
checked控制初始状态，且始终与运行时状态同步（JS 改element.checked = true后，屏幕阅读器立刻感知） - 如果用了
disabled，屏幕阅读器会同时读出“已禁用”，无需额外 ARIA - 想表达“半选中”（如父子级联动的树形复选框），原生
<input>不支持；此时必须放弃原生控件，改用<div role="checkbox"> 并配合 <code>aria-checked="mixed"什么时候真得用 aria-checked
只有当你不用
<input type="checkbox">，而用其他元素模拟复选框行为时，才需要aria-checked：- 用
<span></span>或<button></button>实现可点击的“伪复选框” - 组件库中封装的 Checkbox 组件底层是 div + event listener
- 必须手动同步：点击后设
element.setAttribute('aria-checked', 'true')，并触发change事件供 JS 逻辑响应 - 别漏掉
role="checkbox"—— 没它，aria-checked就是摆设
容易被忽略的兼容性细节
aria-checked的三个合法值："true"、"false"、"mixed"，不能写成"1"或""（空字符串会被解析为false）。-
aria-checked="mixed"仅在明确需要“不确定态”时使用（如父节点部分子项被选中），普通场景不要滥用 - 即使写了
aria-checked，也得靠 JS 手动维护它的值 —— 它不会像原生checked那样自动同步点击行为 - 若同时用了
aria-checked和原生<input>，会造成状态冲突，辅助技术可能读错
- 用
