Dialog modal

Topics

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 technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/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 HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. 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

Top ↑

Accessible modal dialog scripts

Last updated: