Accessibility component generator

Accessible UI components with proper ARIA, keyboard & WCAG checks.

Pick a component to get a working live demo, the exact ARIA roles and attributes it needs, a keyboard interaction map, copy-ready HTML/CSS/JS, and a WCAG 2.2 compliance checklist. Every pattern follows the WAI-ARIA Authoring Practices.

A component is only genuinely accessible where all four overlap - keyboard support, correct ARIA, sound focus management, and WCAG compliance. Miss one and the others don't make up for it.

Modal Dialog dialog Tabs tablist Accordion region Combobox (Autocomplete) combobox Dropdown Menu (Menu Button) menu Tooltip tooltip Toast Notification status Disclosure (Show/Hide) button Alert Dialog alertdialog Radio Group radiogroup Switch (Toggle) switch Breadcrumb navigation

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.