image-redundant-alt

Description

The image-redundant-alt rule ensures that an image’s alt attribute does not duplicate the visible text that is already present immediately adjacent to the image, such as in a link, caption, or surrounding paragraph. When alt text and visible text convey identical information, screen readers announce the same content twice, which is unnecessarily repetitive and can be confusing for users.

This rule meets WCAG requirements by:

1. Appropriate Non-text Alternatives (WCAG 1.1.1 Non-text Content): It ensures that alternative text serves its purpose of providing equivalent information. If the information is already conveyed by adjacent visible text, repeating it in the alt attribute does not add value and creates redundancy.
2. Conveying Information and Relationships (WCAG 1.3.1 Info and Relationships): It ensures the image’s role in context is accurately communicated. When an image is purely supplementary to adjacent text, marking it as decorative with an empty alt correctly reflects its informational role.

To comply with this rule, use empty alt="" for images whose purpose is already fully conveyed by adjacent visible text, or provide distinct alt text that adds information not present in the surrounding content.

Examples

Here, a link contains both an image and visible link text that are identical. Screen readers announce “Product details” twice: once for the image alt and once for the link text.

This example marks the image as decorative with an empty alt="". The link text alone provides all the necessary information, and screen readers announce it only once.

How to fix?

To fix violations of the image-redundant-alt rule, follow these steps:

• Identify images whose alt text duplicates adjacent visible text such as a link label, caption, or heading.

• Set alt="" (empty alt) on the image to mark it as decorative. This tells assistive technologies to skip the image since its context is already conveyed by the surrounding text.

• If the image adds unique information beyond what the adjacent text conveys, provide distinct alt text that describes that additional information rather than repeating the visible text.

Reference

• WCAG Success Criterion 1.1.1: Non-text Content

• WCAG Success Criterion 1.3.1: Info and Relationships