Alternative text of images should not be repeated as text

Rule ID: image-redundant-alt
Ruleset: axe-core 4.7
User Impact: Minor
Guidelines: Deque Best Practice

Build more accessible websites with axe DevTools Pro

Find and fix more issues with Intelligent Guided Tests™ by answering a series of simple questions about your page content. Free trial. No credit card needed.

Compliance Data & Impact

User Impact

Minor
Minor
Critical

Disabilities Affected

  • Blind
  • Deafblind

Standard(s)

  • Deque Best Practice

    How to Fix the Problem

    Don't put the same text in the alt attribute value for a button or link in the text adjacent to the corresponding image or link.

    Bad Example:

    For example, given the icon markup <img alt="Home Page"/>, the adjacent text also says "Home Page". In such a scenario, a screen reader will announce this content to the user as "Home Page Home Page". The redundancy is unnecessary and potentially confusing:

    Home Page Home Page

    <p><a href="index.html"><img src="images/home-icon.png" alt="Home Page" width="24" height="25">Home Page</a></p>

    In this scenario, the icon image's alt attribute value is better left empty by setting alt="".

    Image buttons use the alt attribute as a label. The alt attribute value must be provided, and the value must be clear, concise, and representative of the action performed when the button is activated by the user and not a description of the button image itself.

    Image Button Example

    <input type="image" src="submit.png" name="submit" height="36" width="113" alt="Submit">

    Alternative text writing tips

    Keep in mind that the purpose of a button's alternative text is to relay information to blind users about the image’s contents and purpose. Blind users should receive equivalent information from an image's alternative text as a sighted user receives from the image. Alternative text should state the intent, purpose, and meaning of the image.

    Keep the following questions in mind when writing alternative text for button images:

    • What information does the button present?
    • What purpose does the button fulfill?
    • If I couldn't use an image as a button, what words would I use to convey button information or function?

    Be sure that all text contained in the alt attribute is useful. Words like "chart," "image," "diagram," or image file names are not very useful.

    Why it Matters

    It is unnecessary and potentially confusing to have alternative text for a link or image to be repeated in text adjacent to the link or image since it would be read twice by a screen reader.

    Since image buttons use alt attributes for labels, the labels must not duplicate the text next to the button. Duplicated alternative text for an image or link in the text adjacent to that image or link results in screen readers announcing the text to the user twice.

    Rule Description

    When button and link text repeats in a alt attribute value, screen reader users hear the same information twice, which renders the alt text meaningless and confusing.

    The Algorithm (in simple terms)

    Ensure button and link text is not repeated as image alternative.

    Resources

    Refer to the complete list of axe 4.7 rules.

    Was this information helpful?

    You have already given your feedback, thank you..

    Your response was as follows:

    Was this information helpful?
    Date/Time feedback was submitted: