Image Alt Causes Link Text To Be Redundant
| Field | Value |
|---|---|
| Rule code | Link_Img_Alt_Redundant |
| WCAG conformance level | A |
| WCAG success criterion | 1.1.1 Non-text Content |
| Must be fixed at source | No |
Description
We detected a link that has both a populated accessible name provided through aria-label, inner text content or title attributes as well as an inner image with an accessible alt text value provided. An already existing accessible name on a link may announce redundantly when paired with an inner image that has an alt text attribute. Since the link is already accessibly named, the image nested inside the link can be given a nullified alt text attribute.
How to fix
When an image within a link duplicates accessible text already provided by the link, you should nullify the image’s alt attribute and set its role to presentation. This avoids redundancy and ensures screen readers correctly interpret the link without repetitive announcements. Modify the image tag by setting alt="" and role="presentation" to clearly indicate that the image is decorative within the context of the link text.
For example:
<a href="contact.html">
<img src="contactUsIcon.png" alt="" role="presentation">Contact us
</a>