Social Security Administration Guide: Alternate Text for Images

Section 1. Reference samples and guidance

Pictures

Give the purpose and/or function of the picture within the context of the surrounding information. Avoid putting redundant and/or irrelevant information into the alternate text.

“Pastel leads her handler who holds the harness in his left hand”.

“Guide Dog and man.”
It’s not including the purpose. The picture is of a dynamic action of guiding. Providing static descriptions of active images is not conveying everything that is pertinent.

Portraits (head-shots)

Describe the picture as a portrait and any other pertinent information that stands out. Also provide any text shown in the image, verbatim.

“Pastel Bosken Portrait with American Flag.”

 

“Pastel Bosken.”
It’s not including the pertinent flag background.

Charts, diagrams and illustrations

Give the purpose and function of the chart, diagram or illustration within the context of the surrounding information. Be sure to supply any major trends or data points that are highlighted. Be sure to provide any information that is essential to understanding the image, either in alternative text, or in a longer description.

In Web/HTML it is possible to use a long description (‘longdesc’) attribute for images  that require more information to be presented. The longdesc is not commonly used, and may be eliminated from future versions of HTML standards. Placing longer text and data in the main text or via a ‘view details’ show/hide button is the preferred alternative.

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

“Bar Chart. Figures for Head Pats, Ear Scratches and kisses climb steadily during the week from a few on Monday to around 5-6 on Thursday. There is a rapid decline, comparable to Monday levels, on Friday.”
 

“Chart of Head Pats, Ear Scratches and Kisses Monday through Friday.”
It doesn’t tell us the trend (the main purpose of the chart).

 

“Chart.”
It doesn’t tell us anything.

 

“Bar Chart. M-F: Head Pats: 2,3,4,7,1. Ear Scratches: 0,1,3,4,1. Kisses: 1,1,2,5,2.
It gives data… but the purpose of the chart isn’t to display data; it’s to convey a meaning found in the data. (Tables are for showing data).

 

“Bar Chart. Totals for week 32 are Head Pats: 17. Ear Scratches: 9. Kisses: 11.
It gives additional information not shown on the chart. This is [sic] a bit like using a ‘tool-tip’ to squeeze additional information into a chart. The alternative text should only be for conveying what is shown in the chart for all users.

Logos

Give the text in the logo verbatim, along with any pertinent visual features that convey meaning.

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

 

“Attention & Affection Procurement Department. Office of the Deputy Commissioner.”
It omits the important meaning of the yin-yang symbol.

 

“AAPD Logo.”
It’s an abbreviation; not verbatim text.

Controls and form elements

See ‘Agency Guide: Alternative text for links, controls and form elements’ (a link to the guide is provided in the back pages of this document) for.

 

• media player buttons,

• menu items,

• table sorting buttons

• form controls (e.g. ‘submit’) buttons

• etc.

Links

See ‘Agency Guide: Alternative text for links, controls and form elements’ (a link to the guide is provided in the back pages of this document) for.

• images that are links,

• links containing images

• icons in links (PDF file, Zip File etc.)

• etc.

Do not place hyperlinks (http://www etc.) in image alt text. Image alt text can only be read by a screen reader; it cannot be acted upon (i.e., a user cannot copy the link, and cannot activate the link when it is embedded in alt text). 

Image maps

Image maps apply to websites; not electronic documents.

Image maps should not generally be used because:

 

• They have become an outdated method of presenting links;

• It is easier to use CSS for laying out links on different areas of the screen;

• Screen magnifier users almost always find image maps impossible to use effectively; and

• Screen reader software is commonly able to tab to the areas of the image map, but the alt-text is not automatically exposed during the process.

If, after considering the notes above, image maps are still regarded as absolutely necessary, the alt-text should be presented as it would for links as normal, and placed in the <area> tag. For guidance on links, see ‘Agency Guide: Alternative text for links, controls and form elements’ (a link to this guide is provided in the back pages of this document).

Text contained in an image

Give the purpose and function of the picture within the context of the surrounding information. Also provide any text shown in the image, verbatim.

“Pastel looks up attentively, saying ‘This is me pretending to be interested’ and then yawns, saying ‘and this is me not pretending’.”

 

“This is me pretending to be interested, and this is me not pretending.”
It omits the humor of the yawn… because only the text is relayed, not the images.

 

“Pastel looks up attentively, and then yawns. This is showing interest and lack of interest.”
It’s not verbatim.

Text rendered as an image

Just write the same text, verbatim.

 

“Pastel the Amazing Guide Dog!”

 

“Colorful text saying Pastel the Amazing Guide Dog!”
It’s including information that does not add to the content.

 

By default, Microsoft® Word correctly adds identical alternate text to Word Art.

Bullets

Avoid using images for bullets. If images are absolutely needed, then use the word “bullet” as the alt-text.

 

If bullet images are used programmatically in Word, there is no need (and no mechanism) to add alt-text, but they will be spoken by screen readers correctly.

 

It is rare that a bullet image will need a longer description than “bullet”. If it does, consider whether there are other ways to convey the information (e.g., by breaking list content into separate headings).

 

“Bullet”

 

“Dog Bone”
It’s more important to identify it as a bullet (part of a list).

Spacers (structural images)

Apply a null (Alt=“”) value to spacer / structural images.

Left image: Alt = “”
Center image: Alt = “Pastel portrait with American Flag”
Right image: Alt = “”

 

Left image: Alt = “Spacer long”
Center image: Alt = “Pastel portrait with American Flag”
Right image: Alt = “Spacer short”

Lines, horizontal rules, and separators

Apply alt-text to lines and separators only when there is no other means of conveying the indicated change. The proper use of headings can make lines and separators redundant, and therefore needing only a null alt-text.

Decorative images

Apply a null (Alt=“”) value to decorative images.

For Web/HTML: When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text altogether and will remove the image from the semantic and structural flow of the page.

Left image: Alt = “”
Center image: Alt = “Pastel portrait with American Flag”
Right image: Alt = “”

 

Left image: Alt = “Dog Bones”
Center image: Alt = “Pastel portrait with American Flag”
Right image: Alt = “Dog Bones”

Background images

Apply a null (Alt=“”) value to background images. If background images contain information that is essential for understanding the document, that information should be replicated in the page foreground. In general, it is best to avoid background images if the goal is to have good readability for people with low vision.

For Web/HTML: When an image is used only for decorative purposes, it is often best to remove the image from the page content and add it as a background image using CSS. This will remove the need for alternative text altogether and will remove the image from the semantic and structural flow of the page.

Background image (lightened and enlarged duplication of the pie chart in the foreground): Alt = “”

 

Background image (lightened and enlarged duplication of the pie chart in the foreground): Alt = “Chart same as main chart.”

Watermarks

Use a watermark that has high contrast with the text so that it does not interfere with the reading of the text. Duplicate the watermark text in the first part of the document in the Page Foreground. Failing to do so will mean that screen reader users will never know the message contained in the watermark.

 

In Microsoft Word, the watermark is stored as part of the page header.

 

It’s low contrast, and it omits the watermark message in the main text.

Signatures

For signatures that are rendered as images, add the word ‘signature’ to the image, followed by the name.

“Signature: Pastel Bosken.”

 

“Pastel Bosken”
It doesn’t include an identifier that it is a signature.

 

“Scruffy, poorly written signature of Pastel Bosken”
The extra information is not needed—and this is not the place for a handwriting critique.

Complex / ungrouped / tiled / layered images

Combine / group separate images into one when they visually and logically are presented as one. This is so that one piece of alt-text can be applied to the whole image. The same is needed for images that are produced with multiple layers. Flatten the layers into one before adding the alt-text.

 

Combined images alt-text: “Organizational and Salary Chart: Top level (GS 13-14) is DTP Director; 2nd level (GS11-12) is Office of Budget, Logistics Support, and Complaints; 3rd level (GS 8-10) under Logistics is Ordering, and Distribution.”

There are two main ways to achieve this. (1) Combine the images into one by grouping them; or (2) Apply the alt-text to only one image, and apply null alt-text (Alt=“”) to the others.