In this Article:
What is the Dialog role?
The dialog role is used to mark up an HTML based application dialog or window that separates content or UI from the rest of the web application or page. Dialogs are generally placed on top of the rest of the page content using an overlay. Dialogs can be either non-modal (it's still possible to interact with content outside of the dialog) or modal (only the content in the dialog can be interacted with). from ARIA:dialog role, MDN
What is the Alertdialog role?
The alertdialog role is used to notify users of urgent information that demands the user's immediate attention. Including role="alertdialog" on the element containing the dialog helps assistive technology identify the content as being grouped and separated from the rest of the page content. Examples include error messages that require confirmation and other action confirmation prompts. from ARIA:alertdialog role, MDN
Why and How to Make Accessible Names
Accessible names are needed on the dialog and alertdialog roles so screen reader users can be informed of the purpose of the elements.
Each element with role="dialog" or role="alertdialog" should have one of these two attribute options:
An
aria-labelattribute that is not empty.An
aria-labelledbyattribute that points to an element with text available to screen reader users.
Names given for these elements should clearly describe the destination, purpose, function, or action of the area described by the role.
Learn More
Review our ARIA Landmarks: The Basics article.
Accessibility Landmarks from W3schools
ARIA Landmarks Example from W3
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!