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

Recommendations

• 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".

Examples