a11y/accordion-header

Why

Clickable div headers cannot be reached with the keyboard, and without a heading around them screen reader users cannot jump between sections; without aria-expanded they cannot tell which section is open.

Fix

Simplest: <details name="faq"><summary>Question</summary>…</details> (a shared name keeps one open at a time). Custom: <h3><button type="button" aria-expanded="false" aria-controls="panel-1">Question</button></h3> and a panel with id="panel-1" that is hidden when closed. Add role="region" with aria-labelledby to panels only when there are few of them.

Examples

<!-- bad -->
<div class="accordion-header" onclick="toggle(1)">Shipping</div>
<!-- good -->
<h3><button type="button" aria-expanded="false" aria-controls="ship">Shipping</button></h3>
<div id="ship" hidden>…</div>

Sources

• WAI-ARIA Authoring Practices, Accordion pattern
• MDN, the details element (name attribute for exclusive groups)

Read it in the terminal

npx github:dawidolko/frontend-skills explain a11y/accordion-header