Dialog sheet - Web accessibility testing checklist

How to test a dialog sheet

Gherkin Condensed

Given that I am on a screen with a dialog sheet

1 Keyboard only

WHEN I use the tab key to move focus to the launch button and use spacebar and/or enter key to activate the button I SEE the sheet dialog opens and is in focus
Then when I use the arrow keys I SEE content in the sheet dialog is browsed in logical order and does not leave the dialog
Then when I use the tab key I SEE focus moves to interactive controls in the sheet dialog
Then when I use the escape key I SEE focus returns to the launch button
Or when I use the tab key to move focus to the dismiss/close button AND THEN use the spacebar or enter key to activate the dismiss/close button I SEE focus returns to the launch button

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the tab key to move focus to the launch button and use spacebar and/or enter key to activate the button
- I HEAR The sheet dialog describes its purpose or title on launch
- I HEAR It identifies itself as a dialog
- I HEAR When closed, focus returns to the launch button
- I HEAR When open, content behind the modal remains inert
Then when I use the arrow keys I HEAR content in the sheet dialog is browsed in logical order and does not leave the dialog
Then when I use the tab key I HEAR focus moves to interactive controls in the sheet dialog
Then when I use the escape key I HEAR focus returns to the launch button
Or when I use the tab key to move focus to the dismiss/close button AND THEN use the spacebar or enter key to activate the dismiss/close button I HEAR focus returns to the launch button

3 Mobile screenreader

WHEN I use a screenreader AND I swipe to focus to the launch button
- I HEAR The sheet dialog describes its purpose or title on launch
- I HEAR It identifies itself as a dialog
- I HEAR When closed, focus returns to the launch button
- 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 sheet dialog I HEAR focus stays trapped in the sheet dialog
Then when I swipe to move focus to the dismiss/close button AND THEN double tap on the close button I HEAR focus returns to the launch button

1 Keyboard & screen reader actions

When I use	I see/hear
Launch button	Focus visibly moves to the open sheet dialog itself
Arrow keys	Content within the sheet dialog is browsed in logical order
Tab	Focus visibly moves to interactive controls in the sheet dialog, starting with the first interactive control (typically close button)
Escape	The sheet dialog closes and returns focus to the button that launched it
Space	Any buttons are activated
Enter	Any buttons or links are activated

2 Mobile screenreader gestures

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

3 Screenreader output

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

A dialog sheet must meet WCAG principles:

1 Perceivable

Is easy to identify as a sheet dialog on top of a page (and not a new page)

2 Operable

Is keyboard operable
The close button click/tap target area is no smaller than 44x44px
The focus indication has a 3:1 minimum contrast ratio against adjacent elements
The focus indication has a minimum area equal to the width of the element and 2px in height

3 Understandable

Its purpose and title is clear in the context of the whole page

4 Robust

Conveys the correct semantic role
Meets criteria across platforms, devices and viewports

Sheets are functionally the same as a modal dialog. The only reason there’s an entry for this is because people call it a sheet.

Variations

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

Code examples

<button id="showModal">
  Things you should know
</button>

<dialog role="dialog"
        id="modal"
        tabindex="-1"
        aria-modal="true"
        aria-labelledby="dialog-title"
        class="bottom-sheet">
  <button type="button"
          id="closeModal"
          class="close">
    <span class="hidden">Close</span>
  </button>
  <div class="dialog-content">
    <h2 id="dialog-title" class="h-bravo">
      Things you should know
    </h2>
    <h3>Keyboard</h3>
    <ul>
      <li>Focus must not enter the rest of the page.</li>
      <li>The escape key must close the modal.</li>
    </ul>
    <h3>Screenreader</h3>
    <ul>
      <li>The modal's title is announced on launch.</li>
      <li>The screen reader cannot read content behind the dialog.</li>
    </ul>
    <button type="submit">
      Continue
    </button>
  </section>
</dialog>

Related dialog sheet entries

iOS criteria: Sheet dialog

Web Dialog sheet

How to test a dialog sheet

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

3 Understandable

4 Robust

Variations

Code examples

Dialog sheet using JS (Do NOT use Popover API)

Related dialog sheet entries

Web Dialog sheet

How to test a dialog sheet

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

3 Understandable

4 Robust

A sheet dialog is a modal dialog

Variations

Code examples

Dialog sheet using JS (Do NOT use Popover API)

Related dialog sheet entries