aria-role-dialog

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:

1. The dialog must be properly labeled
2. Keyboard focus must be managed correctly

Note: when possible you may consider using native <dialog> box feature.

SEO impact

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 <dialog> or <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:

1. Attribute aria-labelledby is defined AND is not empty.
2. Attribute aria-label is defined AND is not empty.
3. Attribute title is defined AND is not empty.

Standard

Accessibility, Best Practices, SiteLint