Make accordions keyboard navigable

Poorly implemented accordions trap keyboard users and leave screen reader users unable to understand or navigate collapsed content sections.

Quick Reference

• Use button elements for accordion triggers with aria-expanded
• Associate panels with triggers using aria-controls
• Support Arrow keys for navigation between headers
• Use heading elements appropriately for document structure

Check

Verify accordions use button triggers with aria-expanded, aria-controls, and proper keyboard navigation (Enter, Space, arrows).

Fix

Implement accordions with button elements, aria-expanded state, aria-controls linking to content panels, and keyboard support.