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

Example 4: literal value "undefined"

Per the ARIA true/false/undefined value type, aria-expanded supports three values: true, false, and the literal string undefined. That's a genuine, spec-valid value, not an error, distinct from Example 3 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 expanded state either way. The bookmarklet should treat this as valid, not flag it as an error.

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

« Back to home