Skip to content

World Wide Web Consortium (W3C) Image Tutorial

    Creator: World Wide Web Consortium

    Date Updated: March 21, 2024

    Overview

    Website developers should note these resources as they explain how to use images correctly (and accessibly). The original resources contain more detailed information, and you can find links to specific standards and WCAG success criteria there.

    The information on this page is summarized from the W3C Image Tutorial webpage.

    Quick Facts

    The W3C Image Tutorial provides in-depth details about how to ensure your images are accessible, including:

    • All images (except decorative ones) must have text alternatives.
    • Decorative images do not contain content but merely decorate the page or restate something already within the content. These types of images should use the following attributes:
      • alt=”” (alt attribute equal to a blank string); note that not specifying the `alt` attribute is not an option: this will usually make the screen reader read the image’s file name.
      • role=”presentation”
      • Together, these options will usually help a screen reader determine that the image should not be announced at all.
    • Functional images are more complex.
      • For example, images that double as links, surround the image in a link (`<a>`) tag, use a text alternative inside the link tag, but *follow previous directions on presentation images* for the image itself.
    • Complex images like graphs, charts, or diagrams should provide text or semantic equivalents below the image. There are various ways to accomplish this, all of which are unique to the specific type of data shown in the image.
      • There are entire teams at all major Canadian universities dedicated to translating complex images into alternative formats.
    • Informative images like a letter to indicate email or an old telephone to indicate a phone number should simply have quick, one-word text alternatives: “email” or “phone,” respectively.
    • Also, see the `alt` decision tree. This provides a good starting place for identifying the type of image you have.

    For more information, check out the W3C Image Tutorial webpage.

    References

    Eggert, E., Abou-Zahra, S., & Elton, B. (Eds.). (2024, January 15). An alt Decision Tree. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/tutorials/images/decision-tree/  

    Eggert, E., Abou-Zahra, S., & Elton, B. (Eds.). (2022a, January 17). Complex Images. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/tutorials/images/complex/  

    Eggert, E., Abou-Zahra, S., & Elton, B. (Eds.). (2017b, April 12). Functional Images. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/tutorials/images/functional/#example-5-image-used-in-a-button

    Eggert, E., Abou-Zahra, S., & Elton, B. (Eds.). (2022, February 8). Images Tutorial. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/tutorials/images/ 

    Eggert, E., Abou-Zahra, S., & Elton, B. (Eds.). (2019, June 17). Informative Images. Web Accessibility Initiative (WAI). https://www.w3.org/WAI/tutorials/images/informative/#example-4-images-conveying-an-impression-or-emotion

    Lachance, J., & Elections Canada. (2023, March 22). Making data visualizations accessible to blind and visually impaired people. Statistics Canada. https://www.statcan.gc.ca/en/data-science/network/data-visualizations-accessible  

    Zewe, A. (2022, June 2). Making data visualization more accessible for blind and low-vision individuals. Making data visualization more accessible for blind and low-vision individuals. https://www.csail.mit.edu/news/making-data-visualization-more-accessible-blind-and-low-vision-individuals