Skip to main content Skip to site Map

Dialog modal popover

How to design a dialog modal popover

WCAG Disabilities

A dialog modal popover must meet WCAG principles:

1 Perceivable

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

2 Operable

Must not allow keyboard focus behind the dialog - 2.1.2 A

4 Robust

Name, role, state is documented 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

A dialog modal popover must work for people with disabilities:

Low vision

Text can resize up to 200% with no loss of information - 1.4.4 AA
Text has a 4.5:1 minimum contrast ratio 1.4.3 AA

Motor

Must not allow keyboard focus behind the dialog - 2.1.2 A

Blindness

Name and role is documented - 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Usage

A dialog is intended to interrupt people so they can focus on a singular specific task:

Reading related important content (like “Terms & Conditions”)
Making a crucial decision (like “Are you sure? Yes/No”)
Awareness of an important message (like “You will be logged out in 5 minutes”)

What to avoid

Don’t use dialogs for multi-step processes or wizards unless you have a really compelling business case
- If you’re compelled to do so, ensure progress is saved if the modal is accidentally closed
Do not put a modal/popup on top of a modal

Working example

Annotations for dialogs

Review an accessible dialog with your developers to be certain they understand the acceptance criteria.

<dialog> for the modal itself
<button aria-label="close"> for the close button
h2 for the dialog title

Related dialog modal popover entries