Basic Expand/Collapse
An expand/collapse widget (also known as a disclosure widget or accordion) allows users to show and hide sections of content. This pattern helps manage screen real estate and cognitive load by letting users focus on content relevant to their current task.
The widget consists of a button that controls the visibility of associated content. When collapsed, the content is hidden. When expanded, the content becomes visible.
Space or Enter: When focus is on the button, activates the button and toggles the visibility of the content.
Tab: Moves focus to the next focusable element. When the content is expanded, all focusable elements within the content are included in the page Tab sequence.
Shift + Tab: Moves focus to the previous focusable element.
aria-expanded: Set to "true" when the content is visible, and "false" when hidden. This attribute is placed on the button element.
aria-controls: References the ID of the element containing the content that is shown or hidden. This attribute is placed on the button element.
The content container uses the hidden attribute when collapsed to ensure it is properly hidden from all users, including those using assistive technologies.
This expand/collapse widget is initially in the expanded state. The button has aria-expanded="true" and the content does not have the hidden attribute.
Users can collapse this content by activating the button with Space, Enter, or a click.