Dialog accessibility requirements
Adaptability
Helping people by honouring user preferences and by allowing adaptations to content presentation and time limits.
View test scenarios: Adaptability
| Standard | Description |
|---|---|
| 1.3.4 Orientation, Level AA |
Content is not restricted to a single orientation, unless it's essential |
| 1.4.4 Resize Text, Level AA |
Text can scale up to 200% without loss of content or functionality |
| 1.4.10 Reflow, Level AA |
Content reflows without horizontal scrolling when the viewport is 320px wide |
| 1.4.12 Text Spacing, Level AA |
No loss of content occurs when line, letter or word spacing is increased |
| 1.4.8 Visual Presentation, Level AAA |
Content adjusts as expected when people apply their preferences for text colour, width, alignment, spacing, and size |
| Recommendation | Content and information remain visible and understandable when using high contrast themes |
Animation and movement
Helping people to limit animation or reduce motion within content.
No component-specific requirements
Assistive technologies and semantics
Helping people who use a screen reader or other assistive tech by using appropriate code.
View test scenarios: Assistive technologies and semantics
| Standard | Description |
|---|---|
| 1.3.1 Info and Relationships, Level A |
The dialog has an accessible name |
| 1.3.2 Meaningful Sequence, Level A |
A correct reading sequence is programmatically determined, including when a dialog is opened or closed |
| 2.5.3 Label in Name, Level A |
If the controls to open or dismiss the dialog have a visible text label, their accessible name matches or includes the text label |
| 4.1.2 Name, Role, Value, Level A |
The dialog has a role of dialog or alertdialog depending on context |
| 4.1.2 Name, Role, Value, Level A |
Modal dialogs use aria-modal="true" |
| 4.1.2 Name, Role, Value, Level A |
The controls to open or dismiss the dialog have an appropriate accessible name and role for their function |
| Recommendation | Markup can be parsed without errors |
Colour and contrast
Helping people who struggle with colour perception or low vision.
View test scenarios: Colour and contrast
| Standard | Description |
|---|---|
| 1.4.3 Contrast (Minimum), Level AA |
Text in the dialog has a contrast ratio of at least 4.5:1 against its background |
| 1.4.11 Non-text Contrast, Level AA |
If an icon is the only content of the dialog's close button, it has a contrast ratio of at least 3:1 against its background colours |
| 1.4.11 Non-text Contrast, Level AA |
If a custom focus indicator is used, this has a contrast ratio of at least 3:1 against the background colours |
| 1.4.6 Contrast (Enhanced), Level AAA |
Text in the dialog has a contrast ratio of at least 7:1 against its background |
Consistency and predictability
Helping people by keeping functionality and content consistent and predictable.
View test scenarios: Consistency and predictability
| Standard | Description |
|---|---|
| 3.2.1 On Focus, Level A |
When the controls that open and dismiss the dialog receive keyboard focus, they do not initiate a change of context |
| Recommendation | While a modal dialog is open, the page behind it cannot be scrolled, so the dialog stays in place and the content behind it stays where people left it |
| Recommendation | Dialogs have a clear visible method to dismiss them, such as a close button |
Images and media
Helping people to access (and remove distractions caused by) image, video and audio content.
View test scenarios: Images and media
| Standard | Description |
|---|---|
| 1.1.1 Non-text Content, Level A |
If an icon is the only content of the dialog's close button, it has a text alternative; if a text label is also available, the icon is hidden from screen readers |
Input assistance
Helping people to complete forms, enter data and pass authentication.
No component-specific requirements
Keyboard
Helping people who use a keyboard.
| Standard | Description |
|---|---|
| 2.1.1 Keyboard, Level A |
It is possible to trigger and dismiss the dialog using the keyboard |
| 2.1.2 No Keyboard Trap, Level A |
The dialog does not trap keyboard focus; it can always be dismissed using the keyboard to move focus away |
| 2.4.3 Focus Order, Level A |
When a dialog opens, focus moves to it |
| 2.4.3 Focus Order, Level A |
Until a modal dialog is dismissed, focus is contained within it and the content behind it is inert |
| 2.4.3 Focus Order, Level A |
When a dialog is closed, focus returns to the element that triggered the dialog |
| 2.4.3 Focus Order, Level A |
A close button is the last control in the dialog's focus order, so people reach the content before it, and it is the last thing they meet before leaving a non-modal dialog |
| 2.4.7 Focus Visible, Level AA |
When controls within the dialog receive keyboard focus, a focus indicator is visible |
| 2.4.11 Focus Not Obscured (Minimum), Level AA |
When controls within the dialog receive keyboard focus, they are not fully hidden by other content |
| 2.4.11 Focus Not Obscured (Minimum), Level AA |
When content behind a non-modal dialog receives keyboard focus, the dialog does not fully hide it |
| 2.1.3 Keyboard (No Exception), Level AAA |
The dialog component is accessible by keyboard, with no exceptions |
| 2.4.12 Focus Not Obscured (Enhanced), Level AAA |
When controls within the dialog receive keyboard focus, they are fully visible |
| 2.4.12 Focus Not Obscured (Enhanced), Level AAA |
When content behind a non-modal dialog receives keyboard focus, the dialog moves aside so no part of it is hidden |
| 2.4.13 Focus Appearance, Level AAA |
If the dialog component uses a custom focus style, this has a solid 2 pixel thick perimeter, or equivalent, and a contrast ratio of at least 3:1 against the background colours |
| Recommendation | The Esc key closes the dialog, unless a confirmation is required |
| Recommendation | A custom focus style is used instead of the browser's default, which can be hard to see against some backgrounds |
Pointer and touch
Helping people use single pointer or touch interactions.
View test scenarios: Pointer and touch
| Standard | Description |
|---|---|
| 2.5.2 Pointer Cancellation, Level A |
The controls that open and dismiss the dialog are activated on the up event, not on the down event |
| 2.5.8 Target Size (Minimum), Level AA |
The controls that open and dismiss the dialog have a target area size, or a target area size together with spacing, of at least 24 by 24 CSS pixels |
| 2.5.5 Target Size (Enhanced), Level AAA |
The controls that open and dismiss the dialog have a target area size of at least 44 by 44 CSS pixels |
Text comprehension (optional)
Helping people to read and understand text content.
No component-specific requirements