Accordion demo (aria-expanded)

Accordion accessibility

Compare BEFORE vs AFTER. Try Tab → Enter/Space in the AFTER panel. Use ↑/↓, Home, End to move between accordion headers.

BEFORE: click-only headers (<div>) AFTER: real <button> + aria-expanded

In the AFTER panel, the expanded/collapsed state is exposed to assistive tech, and hidden panels are removed from the tab order.

BEFORE (click-only)

Problem: not keyboard reachable; no aria-expanded.

Inventory

Graphics

Audio

AFTER (buttons + aria-expanded)

Keyboard: Tab to a header button → Enter/Space toggles. Arrow keys move between headers.

Last action: (none yet)

Share this demo