What ARIA role does the Alert Dialog use?

The Alert Dialog uses alertdialog as its primary ARIA role, with role="alertdialog" aria-modal="true" aria-labelledby aria-describedby.

Is the Alert Dialog 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 Alert Dialog 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

Alert Dialog - accessible pattern with ARIA & keyboard support

A working, accessible Alert Dialog 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 - Alert Dialog

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.