HTML: the `aria-checked` attribute

The aria-checked attribute communicates the checked state of a checkbox, radio-like control, or switch pattern to assistive technology.

What you will learn

How to communicate a checked state with aria-checked
What true, false, and mixed mean
Why native checkbox and radio inputs should usually come first

Prefer native controls

<label>
  <input type="checkbox" name="updates">
  Send me updates
</label>

A native checkbox already exposes its checked state, keyboard behavior, and form integration. Use ARIA only when a custom widget genuinely needs to express a supported pattern.

Custom checkbox example

<div role="checkbox" tabindex="0" aria-checked="false">
  Send me updates
</div>

A custom control must update aria-checked when toggled and must also implement focus, keyboard, pointer, visual, and form behavior. The ARIA attribute alone does not make the element interactive.

Available states

true: checked or on.
false: unchecked or off.
mixed: a group contains both checked and unchecked items.

Common mistakes

Using aria-checked on an ordinary button instead of choosing aria-pressed for a toggle.
Leaving the ARIA value unchanged after the user toggles the control.
Using a custom div when a native checkbox or radio input is sufficient.
Forgetting to validate and submit the value to the server when the control belongs to a form.