Frequently Asked Questions
Select a question below to reveal its answer.
An expand/collapse widget (also known as a disclosure widget) allows users to show or hide a section of content. It consists of a button that toggles visibility and a content region that appears or disappears accordingly.
This pattern is useful for reducing visual clutter while keeping content easily accessible on demand.
To create an accessible expand/collapse widget, follow these guidelines:
- Use a
<button>element as the toggle control. - Set
aria-expandedon the button to indicate the current state (trueorfalse). - Use
aria-controlsto associate the button with the content region. - Use the
hiddenattribute to hide the content when collapsed. - Mark the content region with
role="region"andaria-labelledbyreferencing the button. - Ensure the button is keyboard operable and has a visible focus indicator.
Yes. Simply set aria-expanded="true" on the button and remove the hidden attribute from the content region on page load. The widget below this one is open by default as an example.
This content is visible when the page loads. You can collapse it by activating the button above. This demonstrates that the widget works in both directions — expanding hidden content and collapsing visible content.