Loading...
Loading content...
Loading content...
Comprehensive guide to creating accessible accordions with native HTML5 details/summary and ARIA patterns.
Without aria-expanded, a screen reader user doesn't know if the content is hidden or visible. They might press the button and wait for something to happen, not realizing the content expanded below.
Proper accordions allow users to skip large blocks of content. If the header isn't keyboard-accessible (e.g., a div), users have to tab through every single link in the expanded content to move forward.
<details> and <summary> elements provide built-in accordion functionality with native accessibility. The open attribute controls expanded state. This is the simplest and most accessible approach when styling allows.Testing Guide
role="button" on the header with aria-expanded to indicate state. Use aria-controls to link header to content panel. The content panel should have aria-labelledby pointing back to the header. Use hidden attribute or CSS to hide collapsed content.Testing Guide
Divs are not focusable and don't support keyboard activitation.
Keyboard users cannot focus or activate this element.
<div
onClick={toggle}
className="accordion-header"
>
Menu
</div>Button element handles focus and Enter/Space activation automatically.
<button
onClick={toggle}
className="accordion-header"
aria-expanded={isOpen}
>
Menu
</button>Changing an icon visually isn't enough for screen readers.
Screen reader announces 'Settings' but not whether it's open or closed.
<button onClick={toggle}>
Settings {isOpen ? '▼' : '▶'}
</button>aria-expanded explicitly communicates the state (e.g., 'Settings, expanded').
<button
onClick={toggle}
aria-expanded={isOpen}
>
Settings <span aria-hidden="true">{isOpen ? '▼' : '▶'}</span>
</button>