7.1 All images must have alt text to convey equivalent information

Recommendations

When images are unavailable (e.g. turned off or because of visual impairment) the equivalent information must be available.

• Use the <alt> attribute for every image
• Even if the image is purely decorative it should still have alt text - this can be null, i.e. alt="" (no spaces)
• Alt text should serve the same purpose and convey the same meaning as the image:
  • Purely decorative - alt="" (no spaces)
  • Image links - destination or function
  • Bullets - alt="*" (avoid if you can)
• Avoid meaningless alt text - "photo", "image"
• Don't over do it - "Image of...", "link to..." is not necessary
• For icon with text link in same anchor tag use alt="" (see 4.1 )

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 screen reader user hears - "graphic fancy dot dot gif link france graphic fancy dot dot gif link italy graphic fancy dot dot link spain".

Examples

• < Previous
• Images index
• Next > 

Crown Copyright © 2004 - Accessibility statement | Feedback | Credits