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

  • 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.

Explore more on DigitalA11Y Insights

  • WAI-ARIA: Role=Section
    WAI-ARIA: Role=Section

    Description A renderable structural containment unit in a document or application. Note: section is an abstract…

  • WAI-ARIA: Role=Sectionhead
    WAI-ARIA: Role=Sectionhead

    Description A structure that labels or summarizes the topic of its related section. Note: sectionhead is…

  • WAI-ARIA: Role=Command
    WAI-ARIA: Role=Command

    A form of widget that performs an action but does not receive input data. Note:…

  • WAI-ARIA: Role=Select
    WAI-ARIA: Role=Select

    Description A form widget that allows the user to make selections from a set of…

  • WAI-ARIA: Role=Structure
    WAI-ARIA: Role=Structure

    Description A document structural element. Roles for document structure support the accessibility of dynamic web…

Share A11y Love
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=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…

Leave a Reply

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