This page showcases different approaches to building accessible expand/collapse interactions using semantic HTML, ARIA attributes, and progressive enhancement.
An expand/collapse widget—also known as a disclosure widget—reveals additional information when requested by the user. The native <details> element automatically handles keyboard and mouse interaction, and browsers map it to the correct accessibility roles.
<summary>This example uses a regular button to control a region of content. A small script synchronizes the button’s aria-expanded attribute with the content’s visibility.
Transitions can help guide the user’s attention by smoothly revealing or hiding details. When used thoughtfully, they reinforce the causal relationship between control and content.
[aria-expanded]) to keep styling declarative.This accordion allows only one section to be open at a time. It uses buttons, ARIA attributes, and JavaScript to coordinate the expanded state.
Maintain a clear visual hierarchy, provide sufficient interactive affordance, and ensure that content remains readable whether the section is collapsed or expanded.
Use semantic elements, manage focus order, and update aria-expanded when toggling sections. Convey state changes visually and programmatically.
Start with semantic HTML that works without scripts, then layer interactivity to enrich the experience. Users with older browsers or disabled JS should still be able to access critical content.