Tools for Images

Transcript for Video: How to add alt text to images in Microsoft Word (2:07)

Adding alt attributes, sometimes referred to as alt tags, alternative text or alt text, to images in web content, presentation software, web site creation tools, etc., is very similar to adding them to a Microsoft Word document. While each interface will have its own way of navigating to the image properties areas,  the information required to make an image accessible remains the same.  To be accessible, all images must have an an alt attribute even if that alt attribute is empty or null (e.g., alt=” ”). Alt attributes are added to the image properties area into a field labeled as Alt Text, Title, Alt tag, etc.

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

Transcript for Video: Accessible Graphs, Charts and Maps (3:42)

Determining alternative text for complex images such as charts, maps, and graphs can be more difficult.  There are times when a description for these images may not be succinct enough to use an alt attribute AND a description does not appear in the content of the page.  In this situation, one alternative is to add a long description to the content of the page.  If this is not feasible then another alternative is to use the longdesc attribute.

The longdesc attribute can be used in a couple of ways. The following options came from the W3C page on using Longdesc.

Option 1

The image can be a link to the long description page.  Note:  Alternative text should be provided for the image.  There are a number of advantages to linking to a long description page:

  1. The description can be reused for multiple instances of the same image
  2. Avoids visual clutter in the original document
  3. Provides an obvious endpoint to the description

Option 1 example:

<p><img src=”map.gif” alt=”a complex map” longdesc=”mapdesc.html”/></p>

Option 2

A link can be added to the content of the page next to the image or within the same page.  While this methods ensures all users can access the description it also has a limitation in that the longdesc does not identify an obvious end-point. This requires content developers to not only provide the description but also indicate the its end-point.

Option 2 example:

<img longdesc=”thispage.html#desc” alt=”Map of the United States” src=”http://www.mapsofthe world/maps/US.png”>
<div id=”desc”>
<h3>Long Description: Map of the United States</h3>
<!– Full Description of Map –>
<p>Long description ends.</p>
<div>

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