原生 checkbox/radio 不应设 aria-checked，仅自定义组件（如 div[role="checkbox"]）需用；aria-checked="mixed" 仅用于有子项层级的 checkbox 场景；混用原生与自定义时须严格同步状态。

原生 <input type="checkbox"> 或 <input type="radio"> 不需要、也不应该手动设置 aria-checked —— 浏览器会自动同步，加了反而干扰屏幕阅读器读取真实状态。

哪些元素必须用 aria-checked

只在构建**无原生表单控件的自定义复选/单选组件**时才需要，比如：

• 用 <div role="checkbox"> 模拟 checkbox <li>用 <code><span role="radio"></span> 实现 radio 按钮组
• 树形结构中带折叠功能的 <div role="treeitem"> 节点 <p>这些场景下，<code>aria-checked 是唯一能让辅助技术感知“是否选中”的方式。但必须同时满足：
  • role 明确设为 "checkbox" 或 "radio"
  • 添加 tabindex="0" 保证键盘可聚焦
  • 通过 JS 在点击/空格键触发时同步更新 aria-checked 值（不能只切 CSS class）

  aria-checked="mixed" 的真实使用条件

  aria-checked="mixed" 不是“未初始化”或“不确定”，而是明确表示「父级项部分子项被选中」，仅适用于 role="checkbox" 场景，且需有层级语义支撑：

  

  Free Ride - Unlimited free AI

  一款AI工具，主要用于管理 OpenClaw 所使用的来自 OpenRouter 的免费 AI 模型。自动按质量对模型进行排序，配置回退机制以应对速率限制，并更新 opencla...，适合需要提升相关任务效率的用户。

  下载
  • 必须配合 role="treeitem"、role="group" 或 role="option" 等容器角色才有意义
  • 常见于文件夹节点、多级权限配置面板、带子选项的筛选项
  • role="radio" 完全不支持 "mixed"，用了会被忽略

  错误示例：<div role="checkbox" aria-checked="mixed">全部商品</div> —— 没有子项上下文，纯属误导。

  和原生 input 混用时最常踩的坑

  当页面里既有原生 <input type="checkbox">，又混入自定义 role="checkbox" 元素时，状态不同步问题高发：

  • JS 改了原生 input 的 checked 属性，却忘了同步其父容器或关联 label 的 aria-checked（如果它被用来做视觉代理）
  • 监听 change 事件更新 UI，但没处理键盘 Space 触发的切换，导致 aria-checked 和视觉不一致
  • 给原生 input 错误地加上 aria-checked，浏览器直接忽略，但某些旧版 NVDA 可能报错或重复播报
  • 用 aria-hidden="true" 隐藏原生 input 后，没把焦点逻辑完整移交到自定义容器上，造成键盘不可操作

  真正关键的不是“有没有加 aria-checked”，而是“它是否始终与真实选中状态严格同步”，哪怕只差一帧，对依赖它的用户就是不可用。