Techniques

Assign the dialog container ARIA role="dialog", with aria-modal set to "true"

  • The ARIA role dialog indicates to assistive technologies that a dialog has been opened;
  • The aria-modal property informs assistive technologies that content outside of the dialog element should not be accessed.

Provide a description of the purpose of the modal

Use aria-labelledby to associate the dialog’s heading with the dialog.

Place focus at the beginning of the modal dialog

The first element in the modal is likely to be a heading or a “close” button. Correctly coded buttons automatically receive focus, so if your first element is a button there is no further action required. Usually, headings do not receive focus, however we can use a negative tabindex attribute to programmatically provide focus on the modal’s heading, without interrupting the tab order for users.

  1. <h3 id="modal-title" tabindex="-1">Sign up to our newsletter</h3>

Allow users to use the Escape key to dismiss modals

Provide a dedicated close button in addition to providing Escape key control.

Return users to the part of the page they came from

Do not place focus at the beginning of the webpage when the modal is closed. Ensure focus is re-directed to the element that opened the modal dialog.

Restrict tab order solely to the modal dialogue whilst it is open

If you do not restrict keyboard and screen reader access to the modal dialogue, users will be able to navigate to links and form fields on the page behind the dialogue. It will then be difficult for them to find their way back to the dialogue in order to close it.

Tip: save time working out how best to construct a modal dialogue by checking out this very simple, accessible modal dialogue from NC State University.

Examples of good practice

Examples of bad practice

References

WCAG 2.1

  • 1.3.1 Info and Relationships (A) 
  • 1.3.6 Identify Purpose (AAA)
  • 2.1.1 Keyboard (A)
  • 2.4.3 Focus Order (A)

EN 301 549 v 2.1.2

  • 9.1.3.1 Info and Relationships
  • 9.2.1.1 Keyboard
  • 9.2.4.3 Focus Order

Further reading