aria-expandable-region

Ensure that elements that can be expanded or collapsed, such as accordions, have their aria-expanded state properly defined.

Description

Ensure that elements like accordions, menus, or collapsible sections, correctly highlight whether they are currently expanded or collapsed. This helps screen readers and other assistive technologies inform users about the state of these elements.

This allows users to understand whether content is hidden or visible. It should be toggled appropriately when the user interacts with the element, such as opening or closing an accordion section.

Why is it important?

This ensure that users that rely on assistive technologies, like screen readers, know whether a collapsible or expandable region is open or closed to interact with it effectively.

How to fix?

• Use the aria-expanded attribute to indicate the state of expandable or collapsible elements.
• Set aria-expanded="true" when the element is expanded, and aria-expanded="false" when the element is collapsed.
• Ensure that the state of aria-expanded is updated dynamically when the element is expanded or collapsed.

Example

The following example shows an accordion section that does not use the aria-expanded attribute.

The following example shows the same accordion section, but with the aria-expanded attribute properly defined.

Reference

• Using WAI-ARIA state and property attributes to expose the state of a user interface component