Hello. Please sign in!

Social Security Administration Guide: Alternate Text for Images

Web / HTML implementation

Take note yellow icon

See also Agency specific information at the back of this document for links to interactive content, best practices, and sample code.

Adding alt-text to images

<img alt=“Attention & Affection
Procurement Department. Office of the
Deputy Commissioner. Yin-Yang Logo.”

src=“img/bullet.gif” />

Adding a null alt-text

<img alt=“” src=“img/background_scene.gif” />

Adding ‘longdesc’ for longer descriptions

Information and guidance blue icon

If the image needs a longer description than the “alt” attribute can reasonably display, the “longdesc” attribute can be used. The longdesc is a link to an HTML file that contains a summary of the information the image contains. The HTML can be very basic and un-styled, as only screen reader users currently have access to this content.

<a href=“chart_description.htm”><img
src=“chart.jpg” longdesc=“chart_description.
htm”
alt=“Chart showing revenue increases
over the last five years with link to
description of the data”>
</a>

Information and guidance blue icon

The Web Accessibility Tools Consortium (WAT-C) toolbar is a useful tool for inspecting alt-text on web pages. You can view an HTML page with the images showing, and all of the alt-text next to each image. This is useful for examining whether the alt-text is appropriate within the context of the surrounding text, and ensuring that the fine details are covered. The WAT-C tool is available from http://wat-c.org/.

An inset of an original web page, and the WAT-C output.  The output shows the web page with similar layout to the original, but the alt-text is also shown adjacent to each image.  An alert is also shown for an image that has no alt-text.

The example above shows the result of listing images with the WAT-C toolbar, revealing two errors.

  1. It is correct that the portrait should not have alt-text, but each image should have an alt attribute even if it is null. Here it should show alt=“”.

  2. There is a spelling mistake in the Pie chart alt-text. When spell checking draft content in Microsoft Word, alt-text is not included in the spell checker, so a double check with this type of tool is useful.

Adding longer descriptions with a button

Another way to provide long descriptions is to use a button or other element that displays/hides the alternative text as shown below:

None

Main chart image: Alt = “”

Button image: Alt=“Text version of chart” (content is revealed on activation):

None

[MORE INFO...]

*You must sign in to view [MORE INFO...]