Accessible Expand/Collapse Examples
The following examples demonstrate two ways to implement disclosure widgets: using native HTML5 and using ARIA patterns for custom requirements.
1. Native HTML <details> Element
This is the preferred method as it provides built-in keyboard support and semantics.
What is the benefit of using native elements?
Native elements like <details> and <summary> provide keyboard accessibility (Enter/Space to toggle) and proper roles to assistive technology by default, requiring no custom JavaScript for basic functionality.
2. ARIA Disclosure Pattern
Use this pattern when you need a custom button-controlled region that might not fit the details semantics.
To make a custom expand/collapse widget accessible, you must:
- Use a
<button>for the trigger. - Use
aria-expandedto communicate state. - Use
aria-controlsto link the button to the content container. - Ensure the content is hidden from all users (including screen readers) when collapsed using
hiddenordisplay: none.