A modal or dialog element does not have an accessible name provided
| Field | Value |
|---|---|
| Rule code | Manual_Modal_Name_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
A modal or dialog element is lacking an accessible name. This can be provided via an aria-labelledby attribute on the modal container, linking the ID of the modal's title or heading to the value of the aria-labelledby attribute or it can be provided via an h2 heading. Without an accessible name, the modal's functionality and contents are not clear to users utilizing Screen Reader technology.
How to fix
Ensure the modal has a heading that is provided within the modal container. An aria-labelledby attribute is also a viable approach to naming a modal; where the aria-labelledby attribute contains the value of the ID of the modal's title.