« Back to home

Testing aria-checked

Example 1: Static

This fake checkbox does not respond to interaction. It is included to let you inspect a fixed aria-checked="true" state.

Expected result: the accessibility tree should show checked: true for this element, and this never changes.

<div
  role="checkbox"
  tabindex="0"
  aria-checked="true"
>
  Subscribe to newsletter
</div>

Example 2: Interactive

This fake checkbox starts unchecked. Activate it with a click, or with the keyboard using Space, to toggle aria-checked between false and true.

Expected result: the accessibility tree should show checked: false initially, and checked: true once activated. This should toggle back and forth each time the element is activated.

<div
  id="fake-checkbox"
  role="checkbox"
  tabindex="0"
  aria-checked="false"
>
  Subscribe to newsletter
</div>

Example 3: Mixed state

The mixed value is used for a tri-state checkbox where some — but not all — of its controlled child checkboxes are checked. It is commonly used on a "select all" parent checkbox.

Expected result: the accessibility tree should show checked: mixed for this element.

<div
  role="checkbox"
  tabindex="0"
  aria-checked="mixed"
>
  Select all options
</div>

Example 4: Invalid value

Any value other than true, false or mixed is not recognised by the ARIA specification.

Expected result: the bookmarklet should flag this as an invalid value.

<div
  role="checkbox"
  tabindex="0"
  aria-checked="yes"
>
  Subscribe to newsletter
</div>

Example 5: Empty value

An empty aria-checked attribute is not a recognised value and will be flagged as invalid.

Expected result: the bookmarklet should flag this as an invalid value.

<div
  role="checkbox"
  tabindex="0"
  aria-checked=""
>
  Subscribe to newsletter
</div>

Example 6: Undefined

aria-checked is required for the checkbox role, but this element has no aria-checked attribute at all. Distinct from Example 5's empty value, the attribute doesn't exist here, there's nothing to parse as invalid, just nothing declared.

Expected result: the accessibility tree should show no determinable checked state at all, this is not the same as checked: false, assistive technology has nothing to announce either way. The bookmarklet should flag this as undefined.

<div
  role="checkbox"
  tabindex="0"
>
  Subscribe to newsletter
</div>
<!-- no aria-checked attribute -->

Example 7: literal value "undefined"

Per the ARIA tristate value type, aria-checked supports four values: true, false, mixed, and the literal string undefined. That's a genuine, spec-valid value, not an error, distinct from Example 6 where the attribute is missing entirely. In practice this can also turn up by accident, for example JavaScript coercing an actual undefined value into a string when setting the attribute.

Expected result: a valid value per spec, functionally equivalent to omitting the attribute, no determinable checked state either way. The bookmarklet should treat this as valid, not flag it as an error.

<div
  role="checkbox"
  tabindex="0"
  aria-checked="undefined"
>
  Subscribe to newsletter
</div>

« Back to home