The 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 its usually overlaid on top of main content.
![[WP Accessibility logo]](https://wpaccessibility.org/assets/images/logo-wa11ypuu.png){kind=link}
![[Form inside dialog modal]](https://wpaccessibility.org/assets/images/modal-dialog.png){kind=link}
There are two main practices for achieving an accessible modal dialog:
- 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.
- 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 theyre 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
- WAI-ARIA authoring practices for dialog modal.
- Making modals accessible by Andrea Fercia
- Understanding screen reader interaction modes by Lonie Watson
- Using the dialog role (MDN web docs).
- Advanced ARIA Tips for Accessible modal dialogs.
- Mozilla Developer Network page for the HTML native dialog element.
Accessible modal dialog scripts
- A11y dialog script for creating accessible dialog windows.
- Launchy is another script for accessible modal dialog.
- Accessible and flexible React modal dialog.
- W3C Modal Dialog Example
- First published: October 10, 2025
- Last updated: February 05, 2026
- Edit article: Improve it on GitHub
Other pages in: Components
-
Skip links
How to set up an accessible skip link.
-
Post Excerpts
How to set up an accessible excerpt.
Quick links and main topics
Quick links
Disclaimer: This documentation is intended to help the WordPress community understand and implement accessible practices. It is not a replacement for the official Web Content Accessibility Guidelines. Please read the full disclaimer.