Social Security Administration Guide: Alternate Text for Images

Web / HTML implementation

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

Adding a null alt-text

Adding ‘longdesc’ for longer descriptions

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.

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/.

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:

Main chart image: Alt = “”

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