What ARIA role does the Accordion use?

The Accordion uses region as its primary ARIA role, with aria-expanded, aria-controls, button inside heading.

Is the Accordion keyboard accessible?

Yes. The component supports full keyboard navigation including Tab, arrow keys, Enter, Escape, and Home/End where applicable per the WAI-ARIA Authoring Practices.

Does the Accordion pass WCAG 2.2 AA?

Yes. The component meets WCAG 2.2 AA requirements for keyboard accessibility, focus visibility, name-role-value, and status messages.

Accessibility component generator

Accordion - accessible pattern with ARIA & keyboard support

A working, accessible Accordion component that follows the WAI-ARIA Authoring Practices. Try the live demo with your keyboard, inspect the ARIA attributes, copy the HTML/CSS/JS, and check the WCAG compliance checklist.

Live demo - Accordion

Try it with your keyboard. Tab into the widget, use arrow keys/Enter/Escape as applicable. Screen reader welcome.

Loading demo…

Keyboard interaction map

ARIA roles & attributes

Source code - copy & paste

WCAG 2.2 AA compliance checklist

Common mistakes to avoid

Frequently asked questions

What does "A11y" mean?: A11y is shorthand for "accessibility" - the 11 represents the eleven letters between the A and Y. It's a standard abbreviation used across the web development and accessibility community.
Do these components follow the WAI-ARIA Authoring Practices?: Yes. Every component implements the keyboard interaction, ARIA roles, and focus management patterns described in the WAI-ARIA Authoring Practices Guide (APG). The APG is the W3C reference for how ARIA widgets should behave.
Are these components screen-reader tested?: The patterns follow the ARIA specification that screen readers rely on. Each component uses the correct roles, labels, and states that NVDA, JAWS, VoiceOver, and TalkBack expect. We recommend testing with at least NVDA + Firefox and VoiceOver + Safari.
Can I use this code in my project?: Yes. The HTML, CSS, and JavaScript are plain, framework-free, and MIT-licensed. Copy the whole block or adapt it to React, Vue, or any other framework - the ARIA structure stays the same.
Why framework-free vanilla JS?: So the ARIA structure is the star, not the framework wrapper. The same ARIA roles and keyboard handlers work identically whether you build with React, Vue, Svelte, or plain HTML. Framework-free code is the easiest to audit and the hardest to accidentally break.