WAI-ARIA: aria-modal (Property)
New in ARIA 1.1
Indicates whether an element is modal when displayed.
The aria-modal attribute is used to indicate that the presence of a “modal” element precludes usage of other content on the page. For example, when a modal dialog is displayed, it is expected that the user’s interaction is limited to the contents of the dialog, until the modal dialog loses focus or is no longer displayed.
When a modal element is displayed, assistive technologies SHOULD navigate to the element unless focus has explicitly been set elsewhere. Assistive technologies MAY limit navigation to the modal element’s contents. If focus moves to an element outside the modal element, assistive technologies SHOULD NOT limit navigation to the modal element.
When a modal element is displayed, authors MUST ensure the interface can be controlled using only descendants of the modal element. In other words, if a modal dialog has a close button, the button should be a descendant of the dialog. When a modal element is displayed, authors SHOULD mark all other contents as inert (such as “inert subtrees” in HTML) if the ability to do so exists in the host language.
Browser Compatibility For aria-modal
|ChromeFull support81||EdgeFull support81||FirefoxNo supportNo||Internet ExplorerNo supportNo||OperaFull support68||SafariFull support12.1||WebView AndroidFull support81||Chrome AndroidFull support81||Firefox for AndroidNo supportNo||Opera AndroidFull support58||Safari on iOSFull support12.2||Samsung InternetFull support13.0|
Screen Reader Support For aria-modal
|Expectation||JAWS||Narrator||NVDA||Orca||TalkBack||VoiceOver (iOS)||VoiceOver (macOS)|
|MUST convey the presence of aria-modal=true||supported||supported||supported||none||supported||supported||supported||partial||none||none||partial|
|SHOULD limit reading to children of aria-modal=true||supported||supported||supported||none||supported||supported||supported||partial||none||partial||partial|
|SHOULD remove outside content from navigational shortcuts when aria-modal=true||supported||supported||partial||none||supported||supported||supported||partial||none||none||none|
<div id="backdrop" class="no-scroll"> <div role="alertdialog" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc"> <h2 id="dialog_label">Confirmation</h2> <div id="dialog_desc"> <p>Are you sure you want to delete this file?</p> </div> <button type="button" onclick="closeDialog(this)"> No. Close this popup. </button> <button type="button" onclick="deleteFile(this)"> Yes. Delete the file. </button> </div> </div>
Used in Roles
Inherits into Roles
Value representing either true or false. The default value for this value type is False, unless otherwise specified.
- False (default)
- Element is not modal.
- Element is modal.
No HTML element equivalent.
The aria-modal attribute was added to accompany the roles ‘dialog’ and ‘alertdialog’, to indicate to browsers and assistive technologies that the dialog is meant to be modal or non-modal.
If set to ‘true’, the background content in the accessibility tree should be hidden by browsers and assistive technologies so that only the modal content is perceived by the user.
If set to ‘false’ or left undefined, then the background content should not be hidden from the perception of AT users.
Currently this is only supported on iOS using VoiceOver iOS 9.X, so additional testing is needed to verify future levels of support.
To ensure forward compatibility for ARIA dialogs, all modal dialogs that use either role=”dialog” or role=”alertdialog” should include aria-modal=”true” to enable this support in the future. This should only be true for modal dialogs where the background content is not meant to be interacted with while the modal is open.
- W3C (opens new window)
- A11Y Support
- MDN Web Docs