Dialog modal

A dialog is a window that separates content from the main content of a page. It can ask questions or require user input. When the dialog is active and opened, only the content inside the dialog should be available for interaction. Visually it’s usually overlaid on top of main content.

Form inside dialog modal

There are two main practices for achieving an accessible modal dialog:

  1. The use of appropriate WAI-ARIA roles, states, and properties markup for dialog helps assistive technology identify the content as grouped and separated from the rest of the page.
  2. Providing keyboard interaction and restricting focus within the modal helps keyboard users to navigate the content inside the dialog, and only navigate back to the main content when they’re ready.

Detailed information can be found in the WAI-ARIA authoring practices for modals.

The HTML 5.2 specification will include a native <dialog> element which is being implemented by browser vendors. See caniuse.com for up-to-date information on support.

Resources Resources

Top ↑

Accessible modal dialog scripts Accessible modal dialog scripts