Aria-describedby target missing

Pattern Checker

What does this mean?

Aria-describedby is being used on an element. The element this attribute is pointing to is not present on the page.

In the example below this issue would be raised if there was no element on the page with an id of name-hint:

<input type="text" aria-describedby="name-hint" id="name">

Impact on users

The impact will depend on why the element is not present.

It could mean that there is content missing on the page, as in the example above.

A variation of this reason is that the content is only being shown in certain circumstances and the aria attribute has not been given the same logic.

Or it might be that the content is on the page, but the id in the aria attribute or the target element has been misspelled - in this case screen-reader users are disadvantaged as the programmatic connection is lost.

How to fix

Check the correct id has been added to the aria-describedby attribute.

Check the same id is present on the correct element on the page.

If the content is being shown conditionally, then apply the same logic to the assignment of the aria attribute.

When working with id attributes you should also check that there is only one element with that id on the page as the browser will pick the first one it finds.

References

Aria-describedby on MDN

Classification

Level: warn
Tagged: best-practice

See all issues