Making Images Accessible (Alt text and more)

Web graphics, including both images and animations, are used in websites in various roles, such as:

  • Decorative: adding visual/aesthetic appeal to the actual information (e.g. maintain viewer interest and attention)
  • Alternative: provide a structured visual representation of the information on the website (e.g. map of the web site)
  • Informative: communicate or explain information or concepts visually
    • (i) simple (e.g. photograph, icon, logo)
    • (ii) complex (e.g. chart, graph, infographics)

Making images accessible refers to both, the inherent properties of an image as accessibility facilitator (e.g. colour, contrast, fonts, medium), and the use of appropriate text alternatives that describe the information or function represented by them. The text alternatives, usually refered as alt text, must be appropriately anchored to the context, such that users of screen reader software have access to text equivalents for all of the non-text information on the web site.

When preparing the alternative text, it is important to understand what makes for good alt text.    For example what keeping the description and focusing on the function of the image rather than the contents. Below are selected references for creating effective text alternatives. 

Selected Image Accessibility References

  1. Web Accessibility Tutorials: Images - WAI W3C
  2. Accessible Images - WebAIM
  3. HTML5: Techniques for providing useful text alternatives - W3C
  4. Text alternatives - a decision tree - 4 Syllables
  5. Making Images Accessible - Diagram Center
  6. Images - Accessibility and Usability at Penn State University
  7. Alternative Text for Images - Oregon State University
  8. Online Accessibility Program: Image Descriptions - Standford University
  9. Writing Great Alt Text - Whitney Quesenbery
  10. Text Description and Emotion Rich Images - Leonie Watson

Video explanations and tutorials related to image accessibility