WAI-ARIA: Role=Dialog

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated : Roles
WAI-ARIA: Role=Dialog
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

ExpectationJAWSNarratorNVDAOrcaTalkBackVoiceOver (iOS)VoiceOver (macOS)
ChromeEdgeFirefoxEdgeChromeEdgeFirefoxFirefoxChromeSafariSafari
MUST convey its rolesupportedsupportedsupportedpartialsupportedsupportedsupportedsupportednonenonepartial
MUST convey the name of the dialogsupportedsupportedsupportedpartialsupportedsupportedsupportedsupportednonenonepartial
MUST convey the boundaries of the dialogsupportedsupportedsupportednonesupportedsupportedsupportedsupportednonepartialsupported
MUST NOT automatically switch away from reading modesupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupportedsupported

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

Avatar for 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.

Similar Posts

WAI-ARIA: Role=Tablist

WAI-ARIA: Role=Tablist

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A list of tab elements, which are references to tabpanel elements. To be keyboard accessible, authors SHOULD manage focus of descendants for all instances of this role, as described in Managing Focus. For a single-selectable tablist, authors SHOULD hide other tabpanel elements from the user until the user selects the tab associated with that…

WAI-ARIA: Role=Log

WAI-ARIA: Role=Log

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
1 Comment

A type of live region where new information is added in meaningful order and old information may disappear. Description A type of live region where new information is added in meaningful order and old information may disappear. See related marquee. Examples include chat logs, messaging history, game log, or an error log. In contrast to other live…

WAI-ARIA: Role=Treeitem

WAI-ARIA: Role=Treeitem

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description An option item of a tree. This is an element within a tree that may be expanded or collapsed if it contains a sub-level group of tree item elements. A collection of treeitem elements to be expanded and collapsed are enclosed in an element with the group role. Authors MUST ensure elements with role…

WAI-ARIA: Role=Document

WAI-ARIA: Role=Document

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

An element containing content that assistive technology users may want to browse in a reading mode. Description An element containing content that assistive technology users may want to browse in a reading mode. When user agent focus moves to an element assigned the role of document, assistive technologies having a reading mode for browsing static content MAY switch to…

WAI-ARIA: Role=Range

WAI-ARIA: Role=Range

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

An input representing a range of values that can be set by the user. Description An input representing a range of values that can be set by the user. Note: range is an abstract role. Authors should not use this role in content. Characteristics Is Abstract Superclass Role Subclass Roles Supported States and Properties Inherited States…

WAI-ARIA: Role=Tabpanel

WAI-ARIA: Role=Tabpanel

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated On :
0 Comments

Description A container for the resources associated with a tab, where each tab is contained in a tablist. Authors SHOULD associate a tabpanel element with its tab, either by using the aria-controls attribute on the tab to reference the tab panel, or by using the aria-labelledby attribute on the tab panel to reference the tab….

Leave a Reply

Your email address will not be published. Required fields are marked *