要让三态复选框在无障碍访问中被正确识别，必须设置 aria-checked="mixed"，且需配合原生 checkbox 使用、移除 checked 属性、确保逻辑上处于部分选中状态。
要让三态复选框（indeterminate state）在无障碍访问中被正确识别，不能只靠视觉样式，必须配合 aria-checked="mixed" 属性。这是唯一被屏幕阅读器（如 NVDA、VoiceOver）识别为“中间状态”的标准值。
设置 aria-checked="mixed" 的前提条件
该属性需配合原生 <input type="checkbox"> 使用，且该元素必须处于“不确定”逻辑状态（即既不是全选也不是全不选），同时不能设置 checked 或 unchecked 属性：
- 移除
checked属性（否则会被读作“已选中”） - 不要写
aria-checked="true"或"false"—— 这会覆盖混合态 - 确保父级或上下文能体现层级/部分选中语义（例如树形控件中的子项部分勾选）
HTML 示例：语义正确的三态复选框
以下代码可被屏幕阅读器准确播报为“未确定”或“混合”（具体措辞依系统而定）：
aria-checked="mixed"
aria-label="选择全部文件夹"
tabindex="0">
JavaScript 动态切换时的注意事项
当通过脚本控制状态时，必须同步更新 DOM 属性和视觉样式：
立即学习“前端免费学习笔记（深入）”；
- 设为混合态：
el.setAttribute('aria-checked', 'mixed'); el.removeAttribute('checked'); - 设为选中：
el.setAttribute('aria-checked', 'true'); el.setAttribute('checked', ''); - 设为未选中：
el.setAttribute('aria-checked', 'false'); el.removeAttribute('checked'); - 避免仅用 CSS 伪元素（如
::before）模拟勾选 —— 屏幕阅读器无法感知
辅助验证方式
可用浏览器开发者工具的“Accessibility”面板查看 aria-checked 值是否生效，或使用 axe 浏览器插件扫描；也可用 VoiceOver（macOS）或 Narrator（Windows）实际朗读测试。
