Skip to content
a11yman

Find what you need, instantly

Search components, ARIA roles & attributes, and WCAG criteria.

Quick links

DisclosureFlagship guide

Accessible Accordion

A vertically stacked set of headers that toggle the visibility of associated content panels.

Last verified against WCAG 2.2 and WAI-ARIA APG 1.2 on 2026-07-02.

Implementation

Orders ship within 2 business days via standard carrier.

<!-- Each section: an <h3> wrapping the trigger <button>, then its
     region panel. aria-expanded reflects the open state; aria-controls
     and aria-labelledby wire header and panel together. Collapsed
     panels use the hidden attribute. -->
<div class="accordion">
  <h3>
    <button id="acc-shipping-header" aria-expanded="true"
            aria-controls="acc-shipping-panel">Shipping</button>
  </h3>
  <div id="acc-shipping-panel" role="region"
       aria-labelledby="acc-shipping-header">
    <!-- panel content -->
  </div>

  <h3>
    <button id="acc-returns-header" aria-expanded="false"
            aria-controls="acc-returns-panel">Returns</button>
  </h3>
  <div id="acc-returns-panel" role="region"
       aria-labelledby="acc-returns-header" hidden>
    <!-- panel content -->
  </div>
</div>

Required roles, states & properties

Required roles, states, and properties
ElementAttributeWhy
Header <button>aria-expandedCommunicates whether this section's panel is currently visible, announced as "expanded" or "collapsed."
Header <button>aria-controlsAssociates the header with the panel id it toggles, so AT can relate the two even though they aren't nested.
Panelrole="region" + aria-labelledbyLets a screen reader user jump directly to an open panel via landmark/region navigation, labeled by its header.
Header wrapperNative heading element (h3)Keeps the accordion navigable via a screen reader's heading list, independent of the ARIA toggle semantics.

Keyboard interaction model

Keyboard interaction model
KeyBehavior
Tab / Shift+TabMoves focus into and out of the accordion, stopping only on header buttons (collapsed panels are not in the tab order).
Enter / SpaceToggles the focused header's panel open or closed.
Down ArrowMoves focus to the next header.
Up ArrowMoves focus to the previous header.
Home / EndMoves focus to the first / last header.

Focus management rules

  • Only header buttons are ever in the Tab order, panel content is never reachable while its panel is collapsed.
  • Toggling a panel never moves focus away from its header.
  • Arrow Up/Down/Home/End move focus directly between headers, independent of open/closed state.

WCAG 2.2 success criteria mapping

WCAG 2.2 success criteria that apply to this component
SCNameLevelWhy it applies
1.3.1Info and RelationshipsAStructure and relationships conveyed visually are also programmatically determinable.
2.1.1KeyboardAAll functionality is operable through a keyboard interface with no specific timing.
2.4.6Headings and LabelsAAHeadings and labels describe topic or purpose.
2.4.7Focus VisibleAAAny keyboard-operable UI has a visible focus indicator.
4.1.2Name, Role, ValueAFor all UI components, name, role, and value are programmatically determinable; states and changes are announced.

References