aria-dialog-name

ARIA dialog and alertdialog must have an accessible name

Description

Dialog (and alertdialog) elements are a little tricky accessibility-wise. They are usually not part of the natural DOM flow of the page, and in most cases, they appear only as a result of a programmatic or user-driven event. Therefore when dialog elements lack an accessible name, screen reader users may lose or not understand their purpose and context; hence a dialog name is essential to make the context of each dialog perceivable and clear by all users. Note that even though in cases that the dialog doesn’t have an explicit name screen readers will automatically start reading the first text node within it it will not be considered as a valid dialog name.

Quick Fixes

You can apply an accessible name to a dialog by using one of the ARIA labeling attributes (e.g., aria-label, aria-labelledby) or the title attribute.

1✓
2<div aria-label="Sign in"
3     role="dialog"
4     tabindex="0" >
5    <!-- The dialog content -->
6</div>

1✓
2<div aria-labelledby="sign-in-heading"
3     role="dialog"
4     tabindex="0">
5    <h1 id="sign-in-heading">Sign in</h1>
6    <!-- The rest of the dialog content -->
7</div>

1✓
2<div title="Sign in"
3    role="dialog"
4    tabindex="0">
5     <!-- The dialog content -->
6</div>

1✗
2<div role="dialog"
3     tabindex="0">
4     <!-- The dialog content -->
5</div>

1✗
2<!-- There is no element with an id "sign-in-heading" -->
3<div aria-labelledby="sign-in-heading"
4     role="dialog"
5     tabindex="0">
6    <!-- The rest of the dialog content -->
7</div>

How Users Are Affected

Pop-up modals provide the user with a new context that's (usually) detached from the natural DOM flow. When they lack an accessible name screen reader, users may find it difficult to perceive the context and purpose of the modal content.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.3.1 Info and Relationships (A) | 4.1.2 Name, Role, Value (A)