Build modal dialogs with the native dialog element
The dialog element, opened with showModal, does five things a hand-built overlay has to be taught one at a time. Focus moves into the dialog. Focus stays inside it and the browser chrome. Everything behind it goes inert and is hidden from assistive technology. Escape closes it. Focus returns to the element that opened it. W3C lists H102 as sufficient for 2.4.3 Focus Order when a page changes dynamically. Two details from the specification are worth copying while you are there. The button that opens the dialog should carry type=button explicitly, so a browser does not treat it as a submit. And focus returns to the invoking element only if that element still exists, which is the case a dialog that deletes its own trigger has to handle for itself.
How we find it in an audit
We open every modal by keyboard and then try to leave it. Tab past the last control, tab backwards past the first, press Escape, close it and check where focus lands. Scanners can spot a dialog role with no accessible name. Focus behavior only shows itself when somebody actually presses the keys.
How affected users experience it
With a div overlay, a screen-reader user often keeps reading the page behind it, never told that anything opened. Or they tab out of the modal into the dimmed page and start operating controls they cannot see, on a page they thought they had left. The native element holds them inside the dialog until it closes and then puts them back where they were standing. That return is the half everybody forgets to build and the half people notice.
Passes vs. fails
Passes
<button type="button" onclick="dlg.showModal()">Delete</button>
<dialog id="dlg" aria-labelledby="dlg-t">
<h2 id="dlg-t">Confirm deletion</h2>
<button type="button" onclick="dlg.close()">Cancel</button>
</dialog>Fails
<div class="overlay">
<div class="modal">
<h2>Confirm deletion</h2>
</div>
</div>Other ways to satisfy this rule
8 guides on this site are filed under 2.4.3 Focus Order. W3C lists this one as sufficient for that rule when used for changing a web page dynamically, so the condition is part of the test rather than a footnote to it.
- C27sufficientMatch DOM order to visual order
- G59sufficientOrder interactive elements to match the content
- PDF3sufficientFix the reading and tab order in PDFs
- SCR26sufficientInsert new content right after its trigger
- SCR27sufficientReorder sections in the DOM, not just on screen
- F44failureDo not break tab order with positive tabindex
This guide is our interpretation of W3C technique H102: Creating modal dialogs with the HTML dialog element. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.