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.

HTML markup
<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.

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