Dialog modal

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

Form inside dialog modal

There are two main practices how to achieve accessible modal dialog:

  1. WAI-ARIA roles, states, and properties markup for dialog helps assistive technology users identify the dialog’s content as being grouped and separated from the rest of the page content.
  2. Keyboard interaction and focus management helps keyboard users to navigate the content inside the dialog, and go back to main content.

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

Resources Resources

Top ↑

Accessible modal dialog scripts Accessible modal dialog scripts