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 |
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
- W3C (opens new window)
- A11Y Support