Expand/Collapse Widget
The following examples demonstrate accessible disclosure (expand/collapse) widgets. Each uses a <button> element with aria-expanded to indicate the current state and aria-controls to associate the button with the content it controls.
Examples
What is an expand/collapse widget?
An expand/collapse widget, also known as a disclosure widget, lets users show or hide a section of content. It is commonly used for FAQs, settings panels, and progressive disclosure of information.
The button that controls the visibility uses aria-expanded to communicate the current state (expanded or collapsed) to assistive technologies.
Keyboard interaction
- Enter or Space — Toggles the content between expanded and collapsed states.
- Tab — Moves focus to the next focusable element.
- Shift + Tab — Moves focus to the previous focusable element.
When content is collapsed, it is hidden from all users, including assistive technology users, using the hidden attribute.
Accessibility considerations
- Use a native
<button>element for the toggle control so that it is keyboard accessible and has the correct role. - Set
aria-expanded="false"when the content is collapsed andaria-expanded="true"when it is expanded. - Use
aria-controlsto establish a programmatic relationship between the button and the controlled content. - Use the
hiddenattribute (ordisplay: none) to ensure collapsed content is not reachable by keyboard or assistive technology. - The visual indicator (such as a triangle icon) should be decorative and hidden from assistive technology with
aria-hidden="true".