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

« Back to home