aria-checked 应用于自定义 checkbox/radio 控件（如 div + role="checkbox"），不可用于原生 input；必须配合 role、tabindex、JS 同步更新，mixed 表示父项部分子项选中，仅限 checkbox。
aria-checked 应该用在哪些元素上
它只适用于 input[type="checkbox"]、input[type="radio"] 和带 role="checkbox" 或 role="radio" 的自定义控件。原生 input 元素本身已有内置的 checked 状态，**不要手动加 aria-checked**——浏览器会忽略，还可能干扰辅助技术读取真实状态。
什么时候必须用 aria-checked
仅当构建**无原生表单控件的自定义复选组件**时才需要，比如用 div + span 模拟的 checkbox。此时必须同时满足：
-
role="checkbox"（或role="radio"）已明确设置 -
aria-checked值为"true"、"false"或"mixed"（三态场景） - 通过 JS 同步更新该属性值，不能只靠 CSS 类切换
示例：
<div role="checkbox" aria-checked="false" tabindex="0">订阅邮件</div>
aria-checked="mixed" 的实际用途
它不是“不确定”或“未初始化”，而是明确表示**父级项部分子项被选中**，常见于树形结构或分组复选。例如一个文件夹 checkbox，其下 3 个子文件有 2 个被勾选，父级就应设 aria-checked="mixed"。注意：mixed 只对 role="checkbox" 有效，role="radio" 不支持。
容易被忽略的焦点与键盘行为配套
光有 aria-checked 不够。自定义 checkbox 必须：
- 添加
tabindex="0"保证可聚焦 - 监听
Space键切换状态（不是Enter） - 切换时同步更新
aria-checked值，并触发视觉反馈（如 class 切换） - 避免同时设置
aria-checked和checked属性（后者只用于原生 input）
混合使用原生 input 和自定义逻辑时，最容易出问题的是状态不同步——JS 改了 DOM 的 checked，却忘了同步 aria-checked，或者反过来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
