« Back to home

Testing aria-expanded

Example 1: Static

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

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

<button aria-expanded="true">
  Filters
</button>

Example 2: Interactive

This button starts collapsed. Activate it to toggle aria-expanded between false and true, and to show or hide the content below it.

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

<button
  id="expand-button"
  aria-expanded="false"
  aria-controls="expand-content"
>
  Filters
</button>
<div id="expand-content" hidden>
  <p>This content is only shown once the button above is expanded.</p>
</div>

Example 3: Undefined

This button visually behaves like a disclosure, activating it shows and hides the content below, but it has no aria-expanded attribute at all. Distinct from aria-expanded="false", there's no state declared here for assistive technology to pick up on in the first place.

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

<button
  id="expand-button-undefined"
  aria-controls="expand-content-undefined"
>
  Filters
</button>
<!-- no aria-expanded attribute -->
<div id="expand-content-undefined" hidden>
  <p>This content is only shown once the button above is activated.</p>
</div>

« Back to home