Images

Overview

Images should never be the only means of conveying information. A text equivalent needs to available for any image which provides information. If images are used for navigation, the image must have an alt attribute with the same text as the navigation graphic. If the image is solely for “eye candy” then an empty alt attribute must be used.

  • Pay attention to the context of the images. If the image adds to the content of the page then describe it in an alt attribute.
  • If the image is eye candy, or non-essential, than use an empty alt tag (alt=””).
  • An image used as a title for a page should include all of the text in the image in the alt attribute.
  • If an image provides sensory information (think flaming logo) then an appropriate alt attribute should convey that information.

What Not to Do

  • Don’t include extraneous information. This alt attribute is way too long unless you are describing an image on a site about flags: “Image of of an American Flag (Red, White and Blue) about one a quarter inches by one inch”
  • Don’t include the word “link” in an alt attribute for an image used as a hyperlink: “link to aeronautics home page”. Screen readers will identify the fact that there is a link.
  • Don’t include file information: “spacer.gif 236 bytes”
  • If an image is a link, don’t provide an alt attribute that is meaningless when out of context: “Click here”
  • If using CSS to place background or other images, don’t do so if the images convey information.

Class Examples

Class Example (Before, Problems, After)

Long Descriptions

Sometimes short alt text does not convey the information in an image.

Best Practice: describe the image in the text of the page or with a caption. Incorporating information into the actual html page for every visitor to use is usually a better choice than a separate long description.

Use: The purpose of the longdesc attribute is to provide a link to a page or another area of a page with a longer description:  <img longdesc=”http://mypage.com/description” >…..</img> The longdesc attribute to the IMG element is only available to screenreaders.

Example: <img src=”finches.jpg” alt=”A diagram comparing beaks and food of various finches.” longdesc=”finches_longdesc.html” />

HTML5 Support: As of February 2015 Longdesc is part of the HTML5 specifications.

Resources on Long Descriptions and other options for providing this information:

Infographics

Image Maps

  • Include alt text on every hot spot.
  • Include alt text on the image as well.

WCAG 2.0 Guideline

Guideline 1.1 Text Alternatives:  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.

Suggested Tools to Check Images on a Page

  • IE Web Accessibility Toolbar: Use the Images menu to get a list of all Image tags on a page. Images -> Show Image will outline all images and list the alt text.
  • Use the Wave toolbar to check for valid alt attributes. Choose Check -> The Wave -> Check Accessibility Issues. A new window will open with a report on any errors. All images will be displayed as a box with only their alt attributes visible. 
  • Jim Thatcher’s Favelets -> Images
  • Developer’s Toolbar for Firefox: Use the tools on the Images menu to display images without alt attributes. Images -> Display Alt Attributes
  • JAWS – Listen to the page. Do the alt attributes make sense?

Where can I find more information on Accessible Images?