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.
HTML Example 1
<div id="mydialog" aria-hidden="true" role="dialog" class="dialogclass" aria-labelledby="dialogheader">
<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
Inherited States and Properties
- aria-busy (state)
- aria-current (state)
- aria-disabled (state)
- aria-expanded (state)
- aria-grabbed (state)
- aria-hidden (state)
- aria-invalid (state)
Accessible Name Required
No HTML element equivalent.