SSA Alternative Text Guide

Contents

• Key concepts—images and alt-text 1
  • Alternative text is needed for images, links, controls and form elements 2
  • General guidance 2
  • When to add alternate text to Images 3
  • How this guide is organized 4
• Section 1. Reference samples and guidance 7
  • Pictures 8
  • Portraits (head-shots) 9
  • Charts, diagrams and illustrations 10
  • Logos 12
  • Controls and form elements 13
  • Links 13
  • Image maps 13
  • Text contained in an image 14
  • Text rendered as an image 15
  • Bullets 16
  • Spacers (structural images) 17
  • Lines, horizontal rules, and separators 18
  • Decorative images 19
  • Background images 20
  • Watermarks 21
  • Signatures 22
  • Complex / ungrouped / tiled / layered images 23
• Section 2. Common mistakes 25
  • Purpose and function—missing the point 26
  • Text that is too long, verbose, wordy, replete in longness, just too much etc. 28
  • Redundant alt-text (now hear this… twice) 30
  • Not enough, or too much detail 32
  • Erroneous alt-text 33
  • Filenames and paths in place of alt-text 34
  • Extraneous information (‘image of…’, ‘picture of…’ etc.) 35
  • Tool-tips on images 36
  • Color meaning embedded in alt-text 37
  • (Un)grouped images 38
  • Visual language and alt-text language mismatches 40
• Section 3. Implementation (technical details) 43
  • Web / HTML implementation 44
  • Electronic documents implementation 47
• Agency-specific information 51

Copyright

The U.S. Government retains a nonexclusive, royalty-free license to publish or reproduce these documents, or allow others to do so, for U.S. Government purposes. These documents may be freely distributed and used for non-commercial, scientific and educational purposes. Electronic and hard copies should not be modified from this source material without the express and prior written permission from the Social Security Administration.

Disclaimer of Liability

The United States Government nor any of their employees, makes any warranty, express or implied, including warranties of merchantability and fitness for a particular purpose, or assumes any legal liability or responsibility for the accuracy, completeness, or usefulness of any information, apparatus, product, or process disclosed, or represents that its use would not infringe privately owned rights.

Disclaimer of Endorsement

Reference herein to any specific commercial products, process, or service by trade name, trademark, manufacturer, or otherwise, does not necessarily constitute or imply its endorsement, recommendation, or favoring by the United States Government. The views and opinions of authors expressed herein do not necessarily state or reflect those of the United States Government, and shall not be used for advertising or product endorsement purposes.

Trademarks

Many designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where they appear in this publication, and where they were known to the publishing agency, the designations appear as prescribed by the owner’s general trademark guidelines. Other product names may appear in this publication, are used only in an editorial fashion for the benefit of the owner, and with no intention of infringement of any trademark.

Adobe, Adobe Acrobat, Adobe Illustrator, and Adobe Photoshop are registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Microsoft and Windows are either registered trademarks or trademarks of Microsoft Corporation in the United States and/or other countries.

Suggested citation

To cite the work in this guide, use the following information:

SSA-ARC (2010). Social Security Administration Guide: Alternative text for images, Version 1.2. Available from: Social Security Administration—Accessibility Resource Center, 6401 Security Boulevard, Baltimore, Maryland, 21235, USA.

Key concepts—images and alt-text

Alternative text is needed for images, links, controls and form elements

Screen reading software is used by people who are blind or who have low vision. Screen readers can only speak text that is in the document or web page. For any non-text content, text must be added, so that alternative non-visual presentation of the information is possible. Alternative text:

• is read by screen readers in place of images, allowing the content and function of the image to be accessible to people who cannot see;
• is also used by voice input software (the kind used by many people who cannot use their hands) to speak elements on the screen; and
• provides a semantic meaning and description to images that can be found by search engines.

To locate guidance on alternate text for links, controls and form elements, see Agency-specific information at the back of this document.

General guidance

Alternative text (‘alt-text’) for images:

• should be succinct:
• should convey in words the same information that is communicated by the image.
• should represent the purpose and function of the image, not just describe its appearance.
• should not contain extraneous information that is not needed to convey the purpose of showing the image.
• should not be too lengthy. The amount of text depends on the type, and the purpose of the graphic. Where a long description is needed, there are mechanisms other than alt-text that can be employed.

Formal requirements for alternate text are provided in the section on Agency-specific information.

When to add alternate text to Images

Sample: a mock publication page titled “A Welcome Message from the Director” annotated with call-outs identifying the three image types. A patterned dog-bone background flanking the page is labeled “Decorative-type image (the background does not add to the content)”. A photograph of Pastel with the printed caption “Portrait of Pastel, DTDP Director” is labeled “Redundant-type image (the text caption tells us what the image is)”. A pie chart with the segments “Pastel (99%)” and “Other service dogs (1%)”, captioned “Pastel’s Long-range plan for dog treat distribution at the Agency”, is labeled “Information-type image (the information is not repeated elsewhere)”. The page body reads: “In this publication I outline my Long-range plan for dog treat distribution at the Agency, As you can see from the chart below, this is an ambitious, aggressive plan that will require the cooperation of all agency service dogs.”

Screen reader software cannot analyze images, and therefore cannot convert images/graphics to text automatically. To address this limitation, text is programmatically attached to an image. The Screen Reader software then reads this “alternate text” when an image is shown.

Whether to add alternate text depends primarily on the type of image. There are three main types of image:

1. Information-Type images convey important information not contained in the adjacent text:

   Information-Type images definitely need alt-text. Use the guidance in Section 1 to determine how the alt-text should be presented to the reader.

2. Redundant-Type images contain information that is repeated/duplicated in adjacent text or added as a caption associated with the image:

   Redundant-Type images require a judgment to be made about whether to provide alt-text. Alt-text is ordinarily avoided where it is redundant. If the meaning and purpose of an image is contained within the surrounding text, then there is no need to make screen reader users listen to the same information twice.

3. Decorative-Type images contain no information necessary for the comprehension of the document’s content:

   Decorative-Type images definitely do not need alt-text.

How this guide is organized

There are three main sections in this guide:

Section 1. Reference samples and guidance provides advice on what to do and what not to do for different interface elements

Section 2. Common mistakes are referenced from the Section 1 content to alert you to the things you should try to avoid.

Agency-specific information provides the ‘nuts-and-bolts’ of coding for images.

Key to symbols:

• Blue information icon: Information and guidance on what should be done for this element.
• Green check mark icon: The right way to add alt-text in this situation.
• Red cross icon: The wrong way.
• Yellow exclamation mark icon: Take note!

About the sample images and text

The Social Security Administration’s Accessibility Resource Center (ARC) authored this guide. The star of the images is Pastel, the unofficial ASB mascot. Pastel has a few plans to change the way dog treats are distributed at the Agency.

A note for screen reader users of this guide: Each sample contains an image or images, and text that provides the context for the image. The text in the sample is rendered to look like a regular heading, but it is purposefully formatted as plain text. This is done to stop it from showing up as spurious headings when navigating the content of this guide using screen reader. Each sample is bounded by non-visible text stating “begin sample section” and “end sample section”.

Because this is an alt-text guide, the sample image remains undescribed and the actual alt-text is given in the guidance that immediately follows the sample. The authors decided that in this situation it would be useful for screen reader users to know where the image is located in relation to the example text. Therefore, in place of alt-text, we also added invisible text stating “sample image for this section.”

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.

Sample: a photograph of Pastel leading her handler along a garden path; the handler holds the guide harness in his left hand. The sample context text reads: “Guiding is a partnership between the dog and the handler. The handler wants to go somewhere, and the guide dog has to get the handler there safely. To achieve this, decisions are required of both team members. For example, in crossing a street, guide dogs do not have the capability to read traffic lights and ‘cross now’ signals for pedestrians.”

The right way: “Pastel leads her handler who holds the harness in his left hand”.

The wrong way: “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.

Sample: a portrait photograph of Pastel in front of an American flag, with the printed name “Pastel Bosken” beneath it.

The right way: “Pastel Bosken Portrait with American Flag.”

The wrong way: “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.

Take note: 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.

The right way:

Sample: a page titled “Division organizational chart” showing an organizational chart image. The chart has “Canine Division” at the top; below it are “Training and handling Department”, “Attention & Affection Department”, “Dog Treat Distribution Program”, and “Maintenance and Scooper Department”; under the Dog Treat Distribution Program are “Office of Budget”, “Logistics Support”, and “Complaints” (marked with a trash can); under Logistics Support are “Ordering” and “Distribution”. A button labeled “Text version of chart” appears below the chart.

Main chart image: Alt = “”

Button—Text version of chart (content is revealed on activation):

Sample: the text revealed by the button reads:

Organizational chart for Canine Division, with Dog Treat Distribution Program hierarchy expanded.

The four main departments of the canine division are:

• Training and handling department
• Attention and affection department
• etc.

Sample: a bar chart with a vertical axis numbered 0 to 8, series for Head Pats, Ear Scratches and Kisses, and horizontal categories Monday, Tuesday, Wednesday, Thursday and Friday. The chart caption reads: “Chart 17. Attention and Affection Performance Figures - Week 32”. The sample context text reads: “Mondays and Fridays continue to be a problem that the working group are investigating (Chart 17). Future work will involve methods for turning the comparatively high number of head pats into ear scratches.”

The right way: “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.”

The wrong way: “Chart of Head Pats, Ear Scratches and Kisses Monday through Friday.”

It doesn’t tell us the trend (the main purpose of the chart).

The wrong way: “Chart.”

It doesn’t tell us anything.

The wrong way: “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).

The wrong way: “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 i,s 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.

Sample: a web page header reading “AAP Home Page” with a circular logo. The logo contains a yin-yang symbol surrounded by the text “Attention and Affection Procurement Department” and “Office of the Deputy Commissioner”.

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

The wrong way: “Attention & Affection Procurement Department. Office of the Deputy Commissioner.”

It omits the important meaning of the yin-yang symbol.

The wrong way: “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.

Take note: 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.

Sample: two photographs of Pastel side by side. In the first, Pastel looks up attentively; a banner across it reads “This is me pretending to be interested”. In the second, Pastel yawns widely; a banner reads “…and this is me not pretending”.

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

The wrong way: “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.

The wrong way: “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.

Sample: decorative Word Art text in colorful angled lettering reading “Pastel the Amazing Guide Dog!”

The right way: “Pastel the Amazing Guide Dog!”

The wrong way: “Colorful text saying Pastel the Amazing Guide Dog!”

It’s including information that does not add to the content.

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

Bullets

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

Take note: 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.

Take note: 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).

Sample: two lists whose bullet markers are small dog-bone images.

Innocuous affection and attention procurement methods

• Head Pats
• Ear Scratches
• Kisses

Obnoxious procurement methods

• Pestering
• Jumping
• Barking

The right way: “Bullet”

The wrong way: “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.

Sample: a page layout with three images in a row: an invisible spacer image on the left (outlined and labeled “Spacer” for this sample), a center portrait of Pastel with an American flag, and another invisible spacer image on the right (labeled “Spacer”). Text below the portrait reads: “In this publication I outline my Long-range plan for dog treat distribution at the Agency. As you can see from the chart below, this is an ambitious, aggressive plan that will require the cooperation of all agency service dogs.”

The right way:

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

The wrong way:

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

The right way:

Sample: a document that uses headings, not lines, to separate its topics. The sample text reads:

Efficiency improvements in the DTDP

Standardized terminology

From now on, we will be using standardized terminology. For example, ‘beefy logs’ will be known as ‘meaty snacks’ and ‘cookie dings’ will be known only as ‘dog biscuits’. There have been several uses of inconsistent terminology and it has caused distribution snarl-ups. Consistent terminology will improve our productivity.

Tables of contents

The former policy of using unlinked tables of contents in our reports is to be phased out. It has come to my attention that my blind handler is unable to use an unlinked table of contents. For efficiency, we will insist on linked tables from now on.

Missed opportunities

Several times this week, we have had missed opportunities for treat consumption. It was pointed out to me that people had come to my cube with treats, but I was not there. A new treat drop-off bag will be required for my cube, so the efficiency team will be working on the design. Maximum visibility is essential for remedying this situation.

The wrong way:

Sample: the same document with the subheadings removed and horizontal line images used as separators instead. The sample text reads:

Efficiency improvements in the DTDP

From now on, we will be using standardized terminology. For example, ‘beefy logs’ will be known as ‘meaty snacks’ and ‘cookie dings’ will be known only as ‘dog biscuits’. There have been several uses of inconsistent terminology and it has caused distribution snarl-ups. Consistent terminology will improve our productivity.

(horizontal line)

The former policy of using unlinked tables of contents in our reports is to be phased out. It has come to my attention that my blind handler is unable to use an unlinked table of contents. For efficiency, we will insist on linked tables from now on.

(horizontal line)

Several times this week, we have had missed opportunities for treat consumption. It was pointed out to me that people had come to my cube with treats, but I was not there. A new treat drop-off bag will be required for my cube, so the efficiency team will be working on the design. Maximum visibility is essential for remedying this situation.

Decorative images

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

Take note: 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.

Sample: a page layout with a center portrait of Pastel with an American flag, flanked on the left and right by decorative dog-bone pattern images. Text below reads: “In this publication I outline my Long-range plan for dog treat distribution at the Agency. As you can see from the chart below, this is an ambitious, aggressive plan that will require the cooperation of all agency service dogs.”

The right way:

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

The wrong way:

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

Take note: 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.

Sample: a report page with a small pie chart in the foreground and a lightened, enlarged duplicate of the same pie chart as the page background. The sample text reads: “Analysis of treat intake in FY 2009. The majority of treats in this year have been dog biscuits. These treats are welcomed and we wag our tails in thanks. However, the tastier meaty snacks and real bones are our target. One of the main goals for 2010 is, therefore, to increase the percentage of real bones and meaty snacks. We must endeavor to persuade the distributors of treats to ‘up the ante’ from now on. Details are given in Appendix L of the New Deal Plan.”

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

The wrong way: 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.

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

The right way:

Sample: a memo with a high-contrast “Top Secret” watermark whose message is duplicated in the foreground text. The memo reads:

Memo

Status: TOP SECRET

To: All DTDP staff

Subject: Possible backlash of non-guiding service dogs due to forthcoming treat restrictions

Date: 12/23/2010

Dear Team,

It has come to my attention that certain elements of the New Deal Plan for DT distribution are being questioned by certain assistance dogs. It has long been known that non-guiding dogs are treated at a much higher rate than us guide dogs. This situation calls for careful crafting of a press release that highlights the injustices of the past.

The wrong way:

Sample: the same memo with a low-contrast diagonal “Top Secret” watermark across the text and no Status line in the foreground. The memo reads:

Memo

To: All DTDP staff

Subject: Possible backlash of non-guiding service dogs due to forthcoming treat restrictions

Date: 12/23/2010

Dear Team,

It has come to my attention that certain elements of the New Deal Plan for DT distribution are being questioned by certain assistance dogs. It has long been known that non-guiding dogs are treated at a much higher rate than us guide dogs. This situation calls for careful crafting of a press release that highlights the injustices of the past.

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.

Sample: a letter closing with a handwritten signature image. The sample text reads:

Sincerely,

(handwritten signature of Pastel Bosken)

Pastel Bosken,
Director,
DTDP (Dog Treat Distribution Program)

The right way: “Signature: Pastel Bosken.”

The wrong way: “Pastel Bosken”

It doesn’t include an identifier that it is a signature.

The wrong way: “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.

The right way:

Sample: a single combined image of an organizational chart aligned with a salary scale. The chart shows “DTDP Director” at the top; below are “Office of Budget”, “Logistics Support” and “Complaints”; below Logistics Support are “Ordering” and “Distribution”. A vertical “Salary Scale” bar beside the chart aligns GS 13-14 with the top level, GS 11-12 with the second level, and GS 8-10 with the third level.

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

Take note: 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.

Section 2. Common mistakes

Purpose and function—missing the point

A description of an image in isolation from its context is not useful for a screen reader user. Consider the examples below:

Sample: a photograph of Pastel lying down wearing her guide harness. The sample context text reads: “Pastel wears a regular dog collar with a name tag just like other dogs. Pastel also wears a specially designed guide harness. The harness allows her handler to follow her, by feeling the change in direction left or right, and slowing down to negotiate obstacles.”

The wrong way: “Pastel lays in the grass and waits for instructions.”

It’s missing the point. The text surrounding the picture is all about the harness. The purpose of the picture is to show the shape and nature of the harness. The alternate text does not properly convey the purpose of the image within the context of the surrounding text.

The wrong way: “Pastel with her guiding harness.”

It’s missing the function. A description of the harness is not given in the text surrounding the picture. The picture shows the viewer what the guiding harness looks like, so that is what should be included in the alternate text. Again, the purpose of including a description the of the actual harness, is missed.

The right way: “Pastel’s guide harness has a handle running the length of her back. The handle is attached with leather straps that go in front of the chest and behind the front legs.”

Take note: For more examples of how to convey the purpose and function of images with alternate text, see “Appropriate Use of Alternative Text” (http://webaim.org/techniques/alttext/) from WebAIM.

The same graphic can have different meanings depending on the context:

Sample: a page titled “PASTEL’S INTRODUCTION TO THE ACCESSIBILITY RESOURCE CENTER” with a photograph of Pastel and her handler walking. The sample context text reads: “Pastel is a guide dog working in the Agency. She is the unofficial mascot of the Accessibility Center. Below you will find information about the Accessibility Center and its mission.”

The right way: “Pastel at work”

Sample: a page titled “PASTEL’S OFFICIAL GUIDE DOG GUIDE FOR GUIDE DOG WORK, Part 1: The basics of leading” with the same photograph of Pastel and her handler walking. The sample context text reads: “When leading, it is best to be in front. As a leader, I find that out front is the best. My handler is trusting me to remember the route to get from A to B, so in addition to good leading skills, I need good memory abilities.”

The wrong way: “Pastel at work”

This is the same image and alt-text as above, but it is wrong here. It’s missing key information. The subtitle (‘Part 1…’) and the text is about leading, and the image reflects the text. Here it would be useful to describe the picture in with emphasis placed on the ‘leading’ activity.

The right way: “Pastel and her handler walking. Pastel is out in front and her back legs are level with her handler’s legs.”

Text that is too long, verbose, wordy, replete in longness, just too much etc.

Alt text is spoken as one unit or chunk of text by the screen reader. The only way to repeat a portion of the text is to replay the whole text. This can make chart interpretation cumbersome and error-prone for screen reader users.

Take note: There are no specific limits on text length for alternate text. However, a good rule of thumb is a few sentences or about 160 characters.

Sample: a page titled “Distribution plan” containing a line chart of average monthly dog treat distribution, with the caption: “Figure 20: Average Monthly Dog Treat Distribution at the Agency - FY2010 ‘Actual’ and FY2011 ‘New Deal Plan’ projections”. The sample context text reads: “Current figures for dog treat distribution remain at an unacceptably equitable level (Figure 20). The new plan calls for radical redistribution of treats towards those who are more deserving. To achieve the plan’s goals, there will be a radical shift in policy and treat-share-per-canine (TSPC) at the appropriate point in Fiscal Year 2011 (Figure 20).”

The wrong way: “Line chart showing average monthly dog treat distribution. For FY 2010, Pastel and other guide dogs, receive around 15 treats per month, with seasonal fluctuations. There is a peak in December of 18 treats for Pastel and 20 treats for other guide dogs. Other assistance dogs received an unfairly high distribution at 19 treats per month, with a massive 25 treats in December. The New Deal Plan calls for Pastel’s monthly average to climb steadily throughout FY 2011 from 15 to 30. Other Guide dogs will see a corresponding decline in treats, from 15 in October down to a steady 5 per month by May. Other service dogs will see a slight initial raise in their average treat intake from 20 to 21 by December, only to experience a retribution-style drop in treat benefits of a paltry 1 treat per month beginning in February.”

It’s too long. Besides the repetition of the caption text, there is too much information to be easily read in the alt-text.

Sample: the same “Distribution plan” page with the same line chart and caption “Figure 20: Average Monthly Dog Treat Distribution at the Agency - FY2010 ‘Actual’ and FY2011 ‘New Deal Plan’ projections”, but with the chart’s detail moved into the main text, which reads: “Current figures for dog treat distribution remain at an unacceptably equitable level. For FY 2010, Pastel and other guide dogs, receive around 15 treats per month, with seasonal fluctuations. There is a peak in December of 18 treats for Pastel, and 20 treats for other guide dogs. Other assistance dogs receive an unfairly high distribution at 19 treats per month, with a massive 25 treats in December (Figure 20). The New Deal Plan calls for radical redistribution of treats towards those who are more deserving. Pastel’s monthly average will climb steadily throughout FY 2011 from 15 to 30. Other Guide dogs will see a corresponding decline in treats, from 15 in October down to a steady 5 per month by May (Figure 20). To achieve the plan’s goals, there will be a radical shift in policy and treat-share-per-canine (TSPC) at the appropriate point in Fiscal Year 2011, when other service dogs who saw a slight initial raise in their average treat intake from 20 to 21 by December, will experience a retribution-style drop in treat benefits of a paltry one treat per month beginning in February (Figure 20).”

The right way: alt-text = “” (null)

It’s now redundant. The detail in the main text is probably useful for all readers, since it explains the major points of the plan. Note that in moving the reference to Figure 20 after the various explanations of the data reinforces to the reader that the figure is redundant, and therefore null alt-text is acceptable.

Redundant alt-text (now hear this… twice)

Sample: a photograph of Pastel lying down with her guide harness on. The sample context text reads: “Pastel wears a regular dog collar with a name tag just like other dogs. Pastel also wears a specially designed guide harness. The harness allows her handler to follow her, by feeling the change in direction left or right, and slowing down to negotiate obstacles. The harness consists of a long handle that the handler uses to follow Pastel’s movements. This long handle is attached with leather straps that go in front of the dog’s chest and behind the front legs.”

The wrong way: “Pastel lays down with her harness on. There is a long handle running the length of Pastel’s back. This is the handle that the handler uses to follow Pastel’s movements. The long handle is attached with leather straps that go in front of the chest and behind the front legs.”

It’s redundant. In this case, all of the pertinent information about the harness is contained in the surrounding text. Repeating this text in the picture is (a) cumbersome to read; and (b) forces the reader to have to analyze and compare both the picture text and the surrounding text to know whether they have missed any pertinent information.

The right way: “Pastel lays down with her harness on.”

Sample: a pie chart with the segments “Pastel (99%)” and “Other service dogs (1%)”, with the text caption: “Pastel’s long-range plan for dog treat distribution at the Agency”.

The wrong way: “Pie chart for Pastel’s long-range plan for dog treat distribution at the Agency. Pastel = 99%; Other service dogs = 1%”

Half of the text is already in the caption.

The right way: “Pie chart. Pastel = 99%; Other service dogs = 1%”

Take note: If the caption is in text form (programmatically attached or adjacent to the image), there is no need to repeat the caption in the alt-text because a screen reader will speak it. If, however, the caption is rendered as part of the image, the alt-text must include the caption.

Not enough, or too much detail

Sample: a photograph of Pastel leading her handler on a garden path. The sample context text reads: “Guiding is a partnership between the dog and the handler. The handler wants to go somewhere, and the guide dog has to get the handler there safely. To achieve this, decisions are required of both team members. For example, in crossing a street, guide dogs do not have the capability to read traffic lights and ‘cross now’ signals for pedestrians.”

The wrong way: “Walking”

It’s too little information. We don’t know who’s walking? The dog only, the handler, or both as a team?

The wrong way: “Pastel leads her handler. It is a bright, sunny day and they walk on a garden path with trees and flowers in the background.”

It’s too much information. The descriptive information about the picture does not have anything to do with the context. They could be walking almost anywhere, but the place is irrelevant to the story.

The right way: “Pastel leads the way with her handler holding the guide harness in his left hand”.

Just enough information. The text adds information that is not in the surrounding text.

Erroneous alt-text

Sample: a photograph of Pastel lying in the grass wearing her harness, with no flag anywhere in the picture.

The wrong way: “Portrait photo of Pastel with the American Flag in the background”

It’s completely wrong. Sometimes in the editing process, pictures and alt-text get mixed up and mis-assigned. Here, it is clear that the text does not apply. It is essential to double check that the alt-text is what you want it to be.

Filenames and paths in place of alt-text

When you insert a picture (into Microsoft Word, for example), default alt-text is generated with the path and filename. This is useful for developers who need to find where they got the file from, but it is useless for end-users of the document who use screen readers.

Sample: a photograph of Pastel yawning.

The wrong way: “00451.jpg”

The number tells us nothing about the image.

The wrong way: “pastel_yawn.jpg”

Even though the filename alludes to the content in this case, the problem is that this format is not desirable for screen readers. The reader would hear “Image. Pastel underscore yawn dot jaypeg”.

The wrong way: “Z://Sample_Pictures/Pastel/pastel_yawn.jpg”

Like the above, but worse. The reader would hear “Image. Zee colon slash slash sample underscore pictures slash pastel slash pastel underscore yawn dot jaypeg”.

Extraneous information (‘image of…’, ‘picture of…’ etc.)

Screen reader software is usually set to announce certain elements as a means to help the reader stay oriented. For example, the screen reader will say “Table…”, “List…”, “Image…” before the element.

Sample: a photograph of Pastel looking at her handler.

The wrong way: “Image of Pastel looking at her handler.”

Reader hears it twice: “Image. Image of Pastel looking at her handler.”.

The right way: “Pastel looks at her handler.”

Take note: Exception: For charts and diagrams, explain the type at the start of the alt-text. For example, “Pie chart of…”, “Organizational chart of…”.

Tool-tips on images

Tool-tips are supposed to be tips to help you use a tool. A tool is a control or widget. Something like “Play”, “Stop” or “Pause”. A link to a website, however, is not a tool; it is a link to a website. The information that users need to know should not be ‘hidden’ in a tool-tip. Often tool-tip style use for alt-text is done because of a lack of space, or because designers think the minimalist design looks less cluttered. For users with low vision who need to zoom in on the screen, tool-tips can be particularly difficult because as the mouse moves, the tip moves, making it difficult or impossible to track visually.

The wrong way:

Sample: a web page banner showing a photograph of Pastel labeled “Pastel’s Guide”, with the essential information shown only in a hovering tool-tip that reads: “Pastel’s Guide to Being a Guide Dog. Click here to go to Pastel’s website. You could win a prize in our guide Dog puppy name competition.”

It’s a tool-tip, and essential information is hidden from normal view.

The right way:

Sample: the same banner with the information visible on the page as regular text and a link: “Pastel’s Guide to Being a Guide Dog. You could win a prize in our guide Dog Puppy name competition.”

Color meaning embedded in alt-text

Information conveyed through color must also be conveyed textually. The information conveyed in text may be placed in the alt-text, but it should not be the only place that the text is shown. The information should be clearly visible at all times for all users of the interface. Using alt-text attributes to “pop up” information normally conveyed in color is inappropriate, because people who have color vision problems are not required to have their interface set to show alt-text on mouse-over.

The wrong way:

Sample: a screen from the “DTOS Dog Treat Ordering System v1.0178b” with a color legend (green for Completed, blue for Pending, red for Skipped), a Date field showing 12/23/2010, and rows for “Treats for Pastel”, “Treats for other guide dogs” and “Treats for other service dogs”, each with a plain colored status dot and an Edit button. The status is revealed only by a tool-tip reading “Completed” when the mouse hovers over a colored dot.

It’s hiding status information in the alt-text.

The right way:

Sample: the same “DTOS Dog Treat Ordering System v1.0178b” screen where each status dot also carries a distinct symbol (check mark for Completed, question mark for Pending, cross for Skipped) and the tool-tip reads “Completed: Treats for Pastel”.

The alt-text is redundant to the visual indicators of color and symbols.

Take note: Here it is okay to be redundant—the information needed by people who are color blind is also needed by people using screen readers.

(Un)grouped images

If images are placed adjacent to each other in order to make them look like a larger whole-image, they must be combined so that there is only one piece of alt-text. If they are not combined, then separate images each containing their own alt-text can be confusing for screen reader users who are trying to make sense of them separately.

The wrong way:

Sample: two separate images placed side by side so that they appear to be one. Image A is an organizational chart with “DTDP Director” at the top, “Office of Budget”, “Logistics Support” and “Complaints” on the second level, and “Ordering” and “Distribution” under Logistics Support. Image B is a vertical “Salary Scale” bar whose levels (GS 13-14, GS 11-12, GS 8-10) line up with the chart levels.

Image A alt-text: Organizational Chart: Top level is DTP Director; 2nd level is Office of Budget, Logistics Support, and Complaints; 3rd level under Logistics is Ordering, and Distribution.

Image B alt-text: Salary Scale: GS 13-14 Top Level; GS11-12 2nd Level; GS 8-10 3rd Level.

It’s separate when it looks like it’s only one image. The chart and the salary scale are two separate images, but they are clearly linked up visually. The levels on the organizational chart match up with the levels on the salary scale.

The right way:

Sample: the same organizational chart and salary scale combined into a single image (Image A).

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

Visual language and alt-text language mismatches

Ensure that each paragraph of text, including the logo, is programmatically marked with the correct language so that a screen reader pronounces it correctly.

Sample: a Spanish-language page headed by the English-language yin-yang logo of the Attention & Affection Procurement Department. The sample text reads: “División para el informe anual. Este año ha presentado muchos cambios en nuestro proceso para obtener contratos. Hemos eliminado la competencia al despedir todos los perros que estaban infelices. Hemos simplificado el proceso mediante el traslado de más de noventa por ciento del afecto hacia mí, su servidor. Esto significa un excelente progreso para nuestra división.”

The wrong way: “Departamento de adquisición para atención y afecto. Oficina del Comisionado Adjunto. Yin y Yang Logo.”

It’s not the language of the logo. The alternative text should match the language displayed. It is confusing to readers who have low vision to have one language shown and another spoken.

Sample: the same Spanish-language page, now with a Spanish translation of the department name printed as text below the English logo: “Departamento de adquisición para atención y afecto. Oficina del Comisionado Adjunto”. The sample text reads: “División para el informe anual. Este año ha presentado muchos cambios en nuestro proceso para obtener contratos. Hemos eliminado la competencia al despedir todos los perros que estaban infelices. Hemos simplificado el proceso mediante el traslado de más de noventa por ciento del afecto hacia mí, su servidor. Esto significa un excelente progreso para nuestra división.”

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

It’s now in the correct language. The alt-text for the logo image is in the correct language. Additionally, the Spanish language version of the department name is given text below the logo.

Section 3. Implementation (technical details)

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

<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

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>

Take note: 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/.

Sample: the “A Welcome Message from the Director” page shown twice, as the original and as the WAT-C output with each image outlined and its alt-text displayed beside it. The portrait captioned “Portrait of Pastel, DTDP Director” is flagged “No alt!”. The pie chart of “Pastel (99%)” and “Other service dogs (1%)” shows alt=“Pie chart. Oastel = 99%; Other service dogs = 1%”. The signature image shows alt=“Signature: Pastel”, and the page buttons show alt=“Home” and alt=“Next Page”.

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:

Sample: a page titled “Division organizational chart” showing the Canine Division organizational chart image with a “Text version of chart” button below it.

Main chart image: Alt = “”

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

Sample: the text revealed by the button reads:

Organizational chart for Canine Division with Dog Treat Distribution Program hierarchy expanded.

The four main departments of the canine division are:

• Training and handling department
• Attention and affection department
• etc.

Electronic documents implementation

Compatibility has been tested with JAWS for Windows® screen reading software from Freedom Scientific®. For file formats not listed, testing will be required.

Conversion from Microsoft Word to PDF used Adobe® Acrobat® plug-in for Word.

Take note: To remediate a PDF with direct editing in Adobe Acrobat Pro: (1) mark the reading order for the image as ‘background’; (2) mark the image as ‘Figure’; (3) Right click the image and go to ‘Edit Alt Text’.

Microsoft Word implementation

To add alt-text to an image, first determine the type of image in order to prepare the appropriate alt-text wording (To begin, see the main types of image, p.3).

1. Right click the image and select Size…
2. Open the Alt Text Tab and type in the appropriate alt-text.

Sample: annotated screenshots of Microsoft Word. A right-click context menu on the yin-yang logo image highlights the “Size…” item, with the call-out “1. Right click the graphic, then select ‘Size…’”. The Size dialog is open at its “Alt Text” tab, with the call-out “2. Add alternate text in the ‘Alt Text’ Tab.” The Alternative text field contains: “Attention & Affection Procurement Department. Office of the Deputy Commissioner. Yin-Yang Logo”.

For more guidance, see Agency specific information at the back of this document.

PDF (Adobe Acrobat Pro) implementation

Take note: If you are working with a master document in Microsoft Word format, it is better to edit the alt-text in Word before conversion to PDF. If you need to make changes to the master document, much less work is involved in conversion if the alt-text is already in the original Word file. For more guidance, see Agency specific information at the back of this document

To add alt-text to an image, first determine the type of image in order to prepare the appropriate alt-text wording (To begin, see the main types of image, p.3).

1. Open the ‘Touch Up Reading Order Panel’: Advanced… Accessibility… Touch Up Reading Order
2. Right click the image and select Edit Alternate Text…
3. Type in the appropriate alt-text.

Sample: an annotated screenshot of Adobe Acrobat Pro showing a tagged page with a photograph of Pastel marked “Figure - No alternate text exists.” A call-out reads “1. Open the ‘Touch up Reading Order’ panel to identify missing or incorrect alt-text”. A right-click context menu highlights “Edit Alternate Text…” with the call-out “2. Right click the image and select ‘Edit Alternate Text’”.

Agency-specific information

The Accessibility Resource Center

This guide is produced by the Social Security Administration - Accessibility Resource Center (ARC). An electronic copy of this guide, related guides, training information and contact details for the Center can be found at:

The Section 508 ARC Intranet page: http://ssahost.ba.ssa.gov/arc/

Take note: Please note that the above link does not work outside of SSA. It is intended for SSA Intranet users only.

---

Accessibility Resource Center

Social Security Administration Guide: Alternate text for images
Version 1.2
July 2011