Ensures that element with attribute
role="dialog" has a defined accessible name.
role="dialog" on the HTML element helps assistive technology identify the dialog’s content as being grouped and separated from the rest of the page content. However, having only
role="dialog" defined alone is not sufficient to make a dialog accessible. Additionally, the following needs to be done:
- The dialog must be properly labeled
- Keyboard focus must be managed correctly
Note: when possible you may consider using native
<dialog> box feature.
Based on our experience, the
role="dialog" attribute is not directly related to SEO (Search Engine Optimization). Google and Bing’s search bot, for example, does not prioritize or penalize websites based on the use of
<div> HTML elements for dialogs. Google and Bing primarily focuses on elements like titles, meta tags, and structured data for SEO purposes.
How to fix it
The rule passes when one of the following cases is fulfilled:
aria-labelledbyis defined AND is not empty.
aria-labelis defined AND is not empty.
titleis defined AND is not empty.
Accessibility, Best Practices, SiteLint