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

Share A11Y Love

Avatar for Raghavendra Satish Peri

Raghavendra Satish Peri is a digital Transformation specialist working with small & large enterprises in the areas of digital accessibility & digital marketing. He authors an Accessibility Blog at DigitalA11Y.com & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y.com, a community of accessibility professionals, developers, and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books, or writing on his Personal Blog at raghava.in.

Similar Posts

WAI-ARIA: Role=Application

WAI-ARIA: Role=Application

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

A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction pattern supported by a widget role. Description A structure containing one or more focusable elements requiring user input, such as keyboard or gesture events, that do not follow a standard interaction…

WAI-ARIA: Role=None

WAI-ARIA: Role=None

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

An element whose implicit native role semantics will not be mapped to the accessibility API. Description New in ARIA 1.1 An element whose implicit native role semantics will not be mapped to the accessibility API. See synonym presentation. Note: Note regarding the ARIA 1.1 none role.§ In ARIA 1.1, the working group introduced none as a synonym to the presentation…

WAI-ARIA: Role=Img

WAI-ARIA: Role=Img

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

A container for a collection of elements that form an image. Description A container for a collection of elements that form an image. An img can contain captions and descriptive text, as well as multiple image files that when viewed together give the impression of a single image. An img represents a single graphic within a document,…

WAI-ARIA: Role=Scrollbar

WAI-ARIA: Role=Scrollbar

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

A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. Description A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area. A scrollbar represents the…

Leave a Reply

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