The HTML aria-modal attribute
The aria-modal="true" attribute tells assistive technology that everything behind a dialog is inert, so it should keep the user inside the dialog. Set it on the element with role="dialog" or role="alertdialog". The native <dialog> with showModal() manages this for you.
Overview
The aria-modal attribute indicates that a dialog blocks interaction with the rest of the page.
It is a widget property: a declaration about the widget that is normally set once, rather than a state that changes as the user interacts. Because ARIA does nothing on its own, keep it accurate and update it in JavaScript if the widget's behavior does change; a stale value is worse than none. And wherever a native element already expresses the same thing (a <textarea> for multi-line input, the required or readonly attribute, a native multiple select), use that instead.
Like all ARIA, aria-modal changes only the accessibility tree (what assistive technology perceives), never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="dialog" aria-modal="true" aria-labelledby="t"> … </div>Values
| Value |
|---|
| true | false |
Example
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title">
<h2 id="dlg-title">Confirm</h2> …
</div>Best practices
- Follow the first rule of ARIA: use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Set it to match the behavior you actually implement, and change it only if that behavior changes.
- Use the matching native attribute where one exists (
required,readonly,multiple) instead of the ARIA version. - Set it only on an element whose role actually supports this property.