Deepcrawl is now Lumar. Read more.
DeepcrawlはLumarになりました。 詳細はこちら

Inaccessible ARIA dialog name (A11y Best Practice)

Post cover image showing clasped hands - representing website accessibility projects
NULL NULL
 

What does this accessibility issue mean?

Dialog elements on a webpage should always have a name defined to adhere to accessibility best practices.

The name attribute provides a description of the purpose of the dialog element, making it easier for users to understand its function.

Issue details
  • WCAG Level BP
  • Severity: Serious
  • Category: Aria (BP)
  • Rule ID: aria-dialog-name

Lumar can help you find & resolve this website accessibility issue — & many others — on your own site. Speak to our team to get started with the platform.

Get a Lumar demo

 

Example HTML violation: Inaccessible ARIA dialog name (A11y Best Practice)

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head></head>
  <body>
    <title>A Simple Web Page That Violates ARIA Dialog Name Rule</title>
    <div role="dialog" id="emptyDialog"></div>
  </body>
</html>

The above HTML violates the 'aria-dialog-name' accessibility rule because the div with the 'dialog' role does not have an accessible name.

An accessible name can be provided using an aria-label attribute or an aria-labelledby attribute pointing to an element with text.

 

How to fix "Inaccessible ARIA dialog name (A11y Best Practice)" issue

<!DOCTYPE html>
<html lang="en" class="no-js">
  <head></head>
  <body>
    <title>A Simple Web Page That Complies with the ARIA Dialog Name Rule</title>
    <div role="dialog" id="exampleDialog" aria-labelledby="dialogTitle">
      <h2 id="dialogTitle">Example Dialog</h2>
    </div>
  </body>
</html>

In this corrected example, I've added an aria-labelledby attribute to the dialog div, and this corresponds to an ID of a new h2 element that provides a discernible name for the dialog.

To learn more about ARIA dialog naming, you might check axe-core 4.7 which I followed while fixing this error.

Also, some guidelines and rules provided by W3C Web Accessibility Initiative (WAI) might be useful in understanding the error and its fix.

Remember, adhering to web content accessibility guidelines (WCAG) not only helps make your site accessible to people with disabilities but also enhances overall user experience.

 
Digital Accessibility + SEO + Website Health

Build better online experiences — explore the full Lumar platform