Dialog alert - Web accessibility testing checklist

How to test a dialog alert

Gherkin Condensed

Given that I am on a screen with a dialog alert

1 Keyboard only

WHEN I use an action that triggers an alert dialog I SEE the dialog opens
Then when I use the arrow keys I SEE content in the dialog is browsed in meaningful order and does not leave the dialog
Then when I use the tab key I SEE focus moves to interactive controls inside the dialog

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use an action that triggers an alert dialog
- I HEAR the dialog describes its purpose or title on launch
- I HEAR it identifies itself as a dialog
- I HEAR when closed, focus returns to a meaningful place
- I HEAR when open, content behind the modal remains inert
Then when I use the arrow keys I HEAR content in the dialog is browsed in meaningful order and does not leave the dialog
Then when I use the tab key I HEAR focus moves to interactive controls inside the dialog

3 Mobile screenreader

WHEN I use a screenreader AND I perform an action that triggers an alert dialog
- I HEAR the dialog describes its purpose or title on launch
- I HEAR it identifies itself as a dialog
- I HEAR when closed, focus returns to a meaningful place
- I HEAR when open, content behind the modal remains inert
Then when I doubletap with the button in focus I HEAR the dialog opens
Then when I swipe within the dialog I HEAR focus stays trapped in the dialog

1 Keyboard & screen reader actions

When I use	I see/hear
Launch action	Focus visibly moves to the open dialog
Arrow keys	Content within the dialog is browsed in meaningful order
Tab	Focus visibly moves to interactive controls in the dialog
Space	Any buttons are activated
Enter	Any links or buttons are activated

2 Mobile screenreader gestures

When I use	I hear
Swipe	Focus moves within the dialog and doesn't enter the rest of the page
Doubletap	This typically activates most elements.

3 Screenreader output

Reads	I hear
Name	The dialog describes its purpose or title on launch
Role	It identifies itself as a dialog
Group	When closed, focus returns to a meaningful place
State	When open, content behind the modal remains inert

A dialog alert 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 trap keyboard users behind the dialog - 2.1.2 A

4 Robust

Conveys the correct name and role 4.1.2 A
Meets criteria across platforms, devices and viewports 4.0.0 AA

Alerts are functionally similar to a modal dialog. The primary difference is that an alert may not have a dedicated close button, and require people to take a specific action to dismiss (ex: Are you sure you want to delete your account? Yes / No).

Variations

(Spoiler alert: These all have the same rules.)

<button id="showModal">
  Delete my account
</button>

<dialog role="dialog"
        id="modal"
        tabindex="-1"
        aria-modal="true"
        aria-labelledby="dialog-title">
 
  <div class="dialog-content">
    <h2 id="dialog-title" class="h-bravo">
      Delete my account
    </h2>

    <p>
      Are you sure you want to permanently delete your account? This cannot be undone.
    </p>

    <button type="button"
      id="closeModal"
      class="menu">
        No, go back
    </button>

    <button type="button"
      class="menu danger">
        Yes, delete my account
    </button>
  </section>
</dialog>

Related dialog alert entries

iOS criteria: Alert dialog

Web Dialog alert

How to test a dialog alert

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

1 Perceivable

2 Operable

4 Robust

Variations

Dialog alert using JS (Do NOT use Popover API)

Related dialog alert entries

Web Dialog alert

How to test a dialog alert

1 Keyboard only

2 Desktop screenreader

3 Mobile screenreader

1 Keyboard & screen reader actions

2 Mobile screenreader gestures

3 Screenreader output

1 Perceivable

2 Operable

4 Robust

An alert dialog differs from a modal dialog

Variations

Dialog alert using JS (Do NOT use Popover API)

Related dialog alert entries