Control's accessible name set using aria-label

Pattern Checker

What does this mean?

A control (such as a link, button or input) has had its accessible name set using the aria-label attribute.

For example:

<a href="..." aria-label="Edit name">Change</a>

This is normally done to either save visual space (such as setting it on an icon) or to add more context for a screen-reader user which would make the visual interface too noisy.

Impact on users

If the accessible name set using the aria-label does not match the visible content, or at least contain the visible content as the start of the copy, then it can cause issues for users.

Screen-reader users may get different information to other users.

Speech-recognition users will use the visible copy to trigger the control, so they might have difficulty in targeting the control if this does not form the start of the aria-label.

How to fix

If there is no visible copy look at adding visible copy instead of the aria-label. If the control is an icon, having a text label can help users understand the icon.

If there is visible copy, check if the visible copy can be updated to make the need for the aria-label unnecessary.

If the aria-label is adding additional context for screen-reader users, ensure the visible copy makes up the start of that attribute.

For example here we have updated the link's aria-label to make it match the visible copy:

<a href="..." aria-label="Change name">Change</a>

References

Classification

Level: info
Tagged: best-practice

See all issues