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.
