Description
Ensures that element with attribute role="dialog" has a defined accessible name.
Context
Using 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.
How to fix it
The rule passes when one of the following cases is fulfilled:
- Attribute
aria-labelledbyis defined AND is not empty. - Attribute
aria-labelis defined AND is not empty. - Attribute
titleis defined AND is not empty.
Standard
Accessibility, Best Practices, SiteLint