Skip to content

Instantly share code, notes, and snippets.

@hannalaakso
Last active October 7, 2021 17:23
Show Gist options
  • Save hannalaakso/2641fc16d2158e60d551cd9da960b5da to your computer and use it in GitHub Desktop.
Save hannalaakso/2641fc16d2158e60d551cd9da960b5da to your computer and use it in GitHub Desktop.

Accessibility criteria for Modal Dialog - WIP

User story

As an Assistive Technology (AT) user, I want to be informed that a modal dialog has opened, what its purpose is, and how to action / close it.

Acceptance criteria

The modal dialog must:

  1. Be focusable with a keyboard. (If an element eg. button triggers the dialog, that element must also be keyboard focusable.)
  2. Inform user that an alert dialog has opened
  3. Constrain focus to dialog
  4. Return focus to element that had focus before the dialog was invoked.
  5. Be possible to close. Be clear how to close. Examples of ways to close are pressing Esc and a close button.
  6. Underlying page content must not look actionable.
  7. Prevent user searching in the underlying page.
  8. Prevent scrolling of the underlying page.
  9. Should always be visible - regardless of scrolling, screen size or orientation changes.

Where multiple modals are open, above criteria apply to top-most one.

Keyboard Interaction

In draft: "Screen reader users may not rely on the tab key to interact with the dialogue content. Screen readers have many keyboard commands for interacting with content and it's important that the way the dialogue is implemented doesn't prevent themfrom being usable."

This is a good point. Could we use this as the list of commands for testing?

Tab:

  • Moves focus to the next focusable element inside the dialog.
  • If focus is on the last element, moves focus to the first focusable element inside the dialog.

Shift + Tab:

  • Moves focus to the previous focusable element inside the dialog.
  • If focus is on the first element, moves focus to the last focusable element inside the dialog.

Escape:

  • Closes the dialog.
@fofr
Copy link

fofr commented Jul 17, 2017

Regarding points 8 & 9, they would be obstructive if the modal does not contain all information needed to complete the action. Some guidance on usage is probably enough to avoid this.

@hannalaakso
Copy link
Author

Good point. We discussed separately that the modal should contain all the information needed to complete the action so that the user won't need to access the underlying page. We'll include this point in the guidance. Thanks for the heads up.

@hannalaakso
Copy link
Author

These criteria were tested in a prototype modal dialog back in 2017, see alphagov/govuk-design-system-backlog#104 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment