• Making Images Accessible

    Guideline

    WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."

    Overview

    Images are essentially inaccessible to people who are unable to view them. So, we provide Alternative Text when needed.   This issue is addressed based on the purpose and complexity of the images.  

    Alternative Text

    When used should provide a text equivalent of the image. In other words, the tag should include the same meaningful information that other users obtain by looking at the image.  It’s important to not only provide an ALT tag, but also provide one that is useful in the context of the document. You may not need to include every artistic detail, and you may be able to skip over purely decorative images, but those that contain critical information need to have it to spelled out in the ALT text.

  • Image Concepts

    Decorative Images

    Provide a null text alternative (alt="") when the only purpose of an image is to add visual decoration to the page, rather than to convey information that is important to understanding the page.

    Example 1:    A dividing border, for example, would also have a null alt text alt="". 

    border - used to explain that alt text is not need for this type of image.  

    Example 2: Decorative Images as part of text link.   The image below would have alt="" because it is only decorative and included as part of the link.   

    "" Staff Email Directory   

     

    Informative Images

    Informative images convey simple information which can be relayed with a short phrase or sentence. The alt text should explain the meaning or content of the image which does not have to be a literal description.

    Images that Convey Complex Information

    Complex images may contain too much and/or too complex information to be described using alt text.   In those cases, the image must be described using a long description.   A long description will provide the same access to the information that is displayed in the image.

    • Graphs, charts, or diagrams
    • How to effectively describe complex images:  The National Center for Accessible Media (NCAM) has developed guidelines for describing complex images, plus a variety of examples. These are available in their Effective Practices for Description of Science Content within Digital Talking Books.  
    • Examples of Complex Images
    • In HTML, long descriptions can be added either on a separate web page or on the same page in a <div> with an id attribute.   The HTML would need to be modified with the link to the long desc.
      <img src="budget1.png" alt="Table 1. Percentages of images with alt text" longdesc="/page/1997">

Image Tutorials from W3C