Accessible Accordion Demo

Use Enter or Space to expand/collapse accordion sections. Use arrow keys to navigate between headers.

Welcome to the accordion demo! This first section covers the basics of using this accessible accordion interface.

Screen readers will announce when sections are expanded or collapsed, and you can navigate using keyboard controls.

This accordion supports full keyboard navigation:

Enter or Space: Expand/collapse the current section
Arrow Up/Down: Move between accordion headers
Home: Go to first accordion header
End: Go to last accordion header

This accordion follows WCAG guidelines for screen reader accessibility:

Uses proper ARIA attributes (aria-expanded, aria-controls, aria-labelledby)
Provides live status updates when sections are toggled
Uses semantic HTML with proper heading structure
Announces the current state of each section