WAI-ARIA: Role=Dialog
A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element.
Description
A dialog is a descendant window of the primary window of a web application. For HTML pages, the primary application window is the entire web document, i.e., the body element.
Dialogs are most often used to prompt the user to enter or respond to information. A dialog that is designed to interrupt workflow is usually modal. See related alertdialog.
Authors SHOULD provide a dialog label, which can be done with the aria-label or aria-labelledby attribute.
Authors SHOULD ensure that all dialogs (both modal and non-modal) have at least one focusable descendant element. Authors SHOULD focus an element in the modal dialog when it is displayed, and authors SHOULD manage focus of modal dialogs.
Note: In the description of this role, the term “web application” does not refer to the application role, which specifies specific assistive technology behaviors.
Screen Reader Support For Role=Dialog
| Expectation | JAWS | Narrator | NVDA | Orca | TalkBack | VoiceOver (iOS) | VoiceOver (macOS) | ||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Edge | Chrome | Edge | Firefox | Firefox | Chrome | Safari | Safari | |
| MUST convey its role | supported | supported | supported | partial | supported | supported | supported | supported | none | none | partial |
| MUST convey the name of the dialog | supported | supported | supported | partial | supported | supported | supported | supported | none | none | partial |
| MUST convey the boundaries of the dialog | supported | supported | supported | none | supported | supported | supported | supported | none | partial | supported |
| MUST NOT automatically switch away from reading mode | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported | supported |
Role=Dialog Example
HTML Example 1
<div id="mydialog" aria-hidden="true" role="dialog" class="dialogclass" aria-labelledby="dialogheader"><div class="whitebox"><h1 id="dialogheader" tabindex="0" >login</h1>HTME Example 2
<div role="dialog" aria-labelledby="dialogheader"><h2 id="dialogheader">Choose a File</h2>... Dialog contents</div>Characteristics
Superclass Role
- window
Subclass Roles
- alertdialog
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-modal
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Accessible Name Required
- True
Semantic HTML
No HTML element equivalent.
Reference
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=dialog. - A11Y Support
The screenreader compatibility for each of the ARIA attributes is taken from the A11Y Support. Please refer to the original source if screenreader compatibility is updated for role=dialog.
