WAI-ARIA: Role=Dialog

Authored By :Raghavendra Satish Peri Last Updated :April 24, 2024 Roles

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)
Expectation	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

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.

Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.