DEV 6.1 All images must have alt text to convey equivalent information

When images are unavailable (e.g. Turned off or because the user may have a visual impairment,) equivalent information must be supplied.

  • Use the <alt> attribute for every image.
  • Alt text should serve the same purpose and convey the same meaning as the image:
    • Purely decorative - alt="" (no spaces);
    • Image links - use the destination or function;
    • Bullets - alt="*" (avoid if you can - see DEV 5.3.)
  • Avoid adding extra meaningless alt text:
    • "image of...", "this is an image of...";
    • "link to...", "this is a link to..." .
  • For icons with a text link in same anchor (<a>) tag use alt=""
    for the icon:
    • This avoids unnecessary replication that would be heard by screen reader users;
    • However, if the icon is in a separate <a> tag then you must provide a meaningful alt text (this often occurs with table layouts as <a> tags cannot cross table cells - avoid if possible.)

Tip: Pretend to read the page out over the phone. What does each image have to say to give the same meaning? Use that as the alt text.

Frustration: Without alt on bullet images a screen reader user hears something like "graphic fancy dot dot gif link paper graphic fancy dot dot gif link pencil graphic fancy dot dot link pen".

A decorative corner - alt should be NULL (quote quote - no space) NOT fancy corner etc. Image of a symbol with alt text 'email us' not a description of the symbol. Image of a house with correct alt text Home page NOT picture of house 

Poor: An important paragraph of text with alt text just = important notice. It should have the full text If using images as bullet points then use a * as the alt text (but avoid doing this by coding them as lists!

Coding when a redundant text link is present

When in the same anchor <a> tag :
<a href="apples.html">

  <img src="applesicon.gif"
    alt=""> <!-- NULL alt text-->
  apples
</a>

When NOT in the same anchor <a> tag :

<td> <!-- <a> can't cross table cells -->
 <a href="apples.html">
   <img src="applesicon.gif"      alt="apples"> <!-- put alt in -->

 </a>
</td>
<td>
  <a href="apples.html">
    apples
  </a>
</td>