Images

Downloadable page: Download Lesson on Images

The Standards

Section 508 Standards:

WCAG 2.0 Guidelines:

  • Guideline 1.1 Links to an external site.: "Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language." (W3C)

What do the Standards Mean?

Note: the terms alternative text, alt attribute, alt tag and alt text are used interchangeably when referring to adding a text equivalent to non-text content. 

For content to be compliant, a text equivalent must be provided for all non-text content.  Non-text content includes, but is not limited to, images, charts, maps, graphs, symbols, etc.  Providing a text equivalent allows for the non-text content to be presented via auditory and tactile means, based on the needs of the user, in addition to also being rendered visually.

The overall principles for adding alternative text to images can also be applied other non-text content such as applets, embedded media, and plug-ins. When creating alternative text it is important to convey not only the content of the image but also the function, if applicable (e.g. image buttons, image maps, or image links).  

When determining the appropriate alternative text, it is important to consider the content and function of an image.   The alternative text for images can vary based on the context of the image itself.  For images within a link, or functional images, the alternative text should describe the content and function of the image.

Alternative text can be conveyed through the use of an alt attribute associated with the img element or within the context of the image.  Alt attributes should succinctly describe the content conveyed by the element, without being too verbose (for simple objects) or too vague (for detailed objects).  

Some best practices for alt attributes are:

  • Be accurate
  • Be succinct when describing the content and function, if applicable, of the image
  • Avoid redundancy between the alt attribute and the context of the image
  • Avoid the use of phrase like “picture of…” or “image of…” when describing the image unless it is relevant content

To be accessible, all images must have an alt attribute even if that alt attribute is empty or null (e.g., alt=” ”).  Decorative graphics are an example of images with null/empty alt attributes. These images do not convey information relevant to the content of the web page and are not links.  

There are times when description may not be succinct enough to use an alt attribute AND a description does not appear in the content of the page. This is common for complex images such as charts, maps, and graphs. If adding a long description to the content of the page is not feasible then it is best to use the longdesc attribute.  This attribute can be used in a couple of ways:

  • The image can be a link to the long description page.  Note:  Alternative text should be provided for the image.
  • A link can be added to the content of the page next to the image

As of September 2015, there is no visual indicator that a longdesc has been provided with an image.  Until longdesc is better supported, the recommended best practice is to provide a standard link to a longer description along with the longdesc (See Note 1 Links to an external site.).

Although providing alternative text for images sounds simple it is one of the most difficult standards to implement.  Perhaps that’s why there are some many images on the web with missing, poor, or incorrect alternative text.  

WebAIM provides some good examples on how to determine appropriate alternative text for images on their Alternative Text Links to an external site. web page.  

Resources

Information on this page is from the following resources about images:

  • WebAIM Alt Text Links to an external site.. Retrieved December 30, 2015.
    • WebAIM is a non-profit organization associated with the Center for Persons with Disabilities at Utah State University. It is one of the leading resources for information on accessibility.
  • W3C Images Links to an external site.. Retrieved December 30, 2015.
    • This website, w3.org, is the website for The World Wide Web Consortium (W3C), which is a community of individuals who develop web standards. The guides on this website include extensive recommendations, examples, related resources and other helpful tools.
  • United States Access Board. Retrieved January 13, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.  
  • Quick Reference Guide to Section 508 Requirements and Standards.  Links to an external site.Section 508.gov. Retrieved January 23, 2016.
    • This page contains the Section 508 standards as of January, 2016. This does not contain the refreshed standards proposed in February 2015.

Estimated time: 12 minutes