Element uses an invalid target Id for the aria-labelledby attribute
| Field | Value |
|---|---|
| Rule code | Aria_LabelledBy_Invalid |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
If you use the aria-labelledby attribute, it must refer to an in-page element with the matching specified id. We detected that the aria-labelledby value used does not point to an existing in-page element with that same identifier id value.
How to fix
The expected value of the aria-labelledby attribute is one or more Ids. Those Ids must reference elements that are on the current page. Make sure that the Ids are always unique and that the referenced elements exist on the page.
<dialog aria-labelledby="alert-heading" open>
<h1 id="alert-heading">Alert</h1>
<p>The selected option is no longer available. Please make another selection.</p>
<button type="button" id="close-dialog">Return to order</button>
</dialog>