aria-checked

When to use

On widgets that have a tri-state or binary check semantic: role="checkbox", role="radio", role="menuitemcheckbox", role="menuitemradio", and role="switch". If you are using the native <input type="checkbox"> or <input type="radio">, the browser exposes the checked state to assistive technology already — do not duplicate it with aria-checked.

Distinguish from neighbouring states:

• aria-checked — for “this option is selected from a set of choices, often independently of others”. Checkboxes and radio buttons.
• aria-pressed — for toggle buttons (mute / unmute). The element is conceptually a button; the state is whether the action is currently on.
• aria-selected — for items inside a single-select container like a tablist, listbox, or tree. The state belongs to the container’s selection model, not the item itself.

How to keep it in sync

Valid values are "true", "false", "mixed", and "undefined". Use "mixed" only on a parent checkbox that summarises a group of child checkboxes in inconsistent states (the classic “select all” indeterminate pattern). "undefined" is rare in practice; most authors use "false" instead.

The attribute must reflect what the user sees. Whatever click and keyboard handler updates the visual tick mark must also write the new aria-checked value in the same code path. Never style a “checked” appearance from CSS without flipping the attribute.

For role="radio" inside a radiogroup, exactly one option should carry aria-checked="true" at any time; the others must be "false" (not absent).

Common failures

• Omitting aria-checked entirely on a role="checkbox" element — the screen reader announces “checkbox” with no state.
• Toggling a class to show the checkmark but never updating aria-checked.
• Using aria-checked="true" on a native <input type="checkbox"> — the browser ignores it and the duplicated state can drift out of sync.
• Setting aria-checked="mixed" on a single checkbox rather than a parent that summarises children.
• Leaving sibling radios without aria-checked="false" — assistive technology cannot infer the unchecked state.
• Confusing aria-checked with aria-selected on listbox options or tabs.

Example

<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>