Text of buttons and links should not be repeated in the image alternative
When button and link text is repeated in an
<alt> attribute value, screen reader users will hear the same information twice, which renders the alt text meaningless and confusing.
Why this is ImportantIt is unnecessary and potentially confusing to have alt text for a link or image to be repeated in the 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. The duplication of alternative text for an image or link in the text adjacent to that image or link can cause assistive technology such as a screen reader to render this to the user as the same text repeated twice in a row, which can be confusing to blind users because alt text should describe the destination or purpose and make sense out of context of the words around it.
How to Fix the Problem
Don't put the same text in the alt text for a button or link in the text adjacent to that image or link.
In this example, the icon image's
alt text says "Home Page" and the text adjacent to that image also says "Home Page". In such a scenario, an assistive technology would render this to the user as "Home Page Home Page". This redundancy is unnecessary and potentially confusing.
<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 text would be better left empty, i.e.,
Image buttons use the
alt attribute as the label. The
alt attribute value must be provided, and it must be clear and concise and representative of the action performed when the button is activated by the user (not a description of the image itself).
Image Button Example
<input type="image" src="submit.png" name="submit" height="36" width="113" alt="Submit">
Tips on writing alt text
When writing the
alt text, keep in mind that the purpose of the
alt text is to relay information to blind users about the image’s contents and purpose - blind users should be able to get as much information from
alt text as a sighted user gets from the image itself.
alt text should give the intent, purpose, and meaning of the image.
alt text, it is helpful to keep the following questions in mind:
- Why is the non-text content here?
- What information is it presenting?
- What purpose does it fulfill?
- If I could not use the non-text content, what words would I use to convey the same information or function?
Be sure that all text contained in the
alt attribute is useful. Words like "chart," "image," "diagram," or image file names tend not to be very useful and thus should not be used in
- HTML 4