aria-checked

使用时机

适用于具有三态或二态选中语义的组件：role="checkbox"、role="radio"、role="menuitemcheckbox"、role="menuitemradio" 以及 role="switch"。使用原生 <input type="checkbox"> 或 <input type="radio"> 时，浏览器已将选中状态暴露给辅助技术——无需再重复设置 aria-checked。

与相邻状态的区别：

• aria-checked — 用于”此选项从一组选项中被选中，通常相互独立”，适用于复选框和单选按钮。
• aria-pressed — 用于切换按钮（如静音/取消静音）。元素在概念上是按钮，状态表示该操作当前是否处于开启状态。
• aria-selected — 用于单选容器（如 tablist、listbox 或 tree）内的条目。状态属于容器的选择模型，而非条目本身。

如何保持同步

有效取值为 "true"、"false"、"mixed" 和 "undefined"。"mixed" 仅用于汇总一组子复选框处于不一致状态的父复选框（即经典的”全选”不确定状态模式）。"undefined" 在实践中较为少见，大多数情况下使用 "false" 代替。

该属性必须如实反映用户所见的状态。无论是点击处理程序还是键盘处理程序，在更新视觉对勾的同时，必须在同一代码路径中写入新的 aria-checked 值。切勿仅通过 CSS 渲染”已选中”外观而不同步翻转该属性。

对于 radiogroup 中的 role="radio"，任意时刻应有且仅有一个选项带有 aria-checked="true"，其余选项必须设为 "false"（而非省略）。

常见错误

• 在 role="checkbox" 元素上完全省略 aria-checked——屏幕阅读器会宣读”复选框”但无法报告状态。
• 切换 class 以显示对勾，但从不更新 aria-checked。
• 在原生 <input type="checkbox"> 上使用 aria-checked="true"——浏览器会忽略该属性，且重复的状态可能产生不一致。
• 在单个复选框（而非汇总子项的父复选框）上设置 aria-checked="mixed"。
• 未为同组单选按钮设置 aria-checked="false"——辅助技术无法推断未选中状态。
• 将 aria-checked 与 aria-selected 混用于 listbox 选项或 tab 上。

示例

<div role="group" aria-labelledby="prefs-heading">
  <h3 id="prefs-heading">Email preferences</h3>

  <div
    role="checkbox"
    tabindex="0"
    aria-checked="false"
    onclick="toggle(this)"
    onkeydown="if (event.key === ' ') { event.preventDefault(); toggle(this); }"
  >
    Send me weekly summaries
  </div>
</div>