Aria-describedby no copy

Pattern Checker

What does this mean?

The element referenced by aria-describedby has no content.

Impact on users

The impact on the user depends on whether the correct element was referenced. Typically we find this issue when dynamic content is not always rendered but the aria is always set (for example with error messages or hints).

For example:

<div id="error"></div>
...
<input type="text" aria-describedby="error">

In this case it is just a case of bad practice and the user is not impacted.

However if there is meant to be content in the element then it means that the user will miss this content. Similarly if the wrong element has been referenced.

How to fix

Check to see if the correct element has been referenced.

Then check if the content which should be in that element is missing.

If the missing content is not there by design (ie dynamic), then apply the same logic to the aria-describedby assignment to prevent further warnings.

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