All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
On this page:
Rationale
Nongraphical browsers and screen readers cannot identify images to visually impaired users. To communicate the information users need, it is important to associate alternative text with all images, particularly active images such as links or buttons. The alternative text should be meaningful and provide a brief description of the image. When images are not active links, use alternative text appropriately. A person who listens to information cannot ignore text as a person viewing the page can ignore an image. If images are not important or if they are redundant, assign empty alternative text so that the assistive technology and nongraphical browsers ignore the image.
The use of alternative text is not just for people who have visual impairments; alternative text is also used by text-only browsers, search engines and devices such as mobile phone browsers.
Required development techniques
Compliance with this checkpoint requires all of the following techniques to be met. These techniques are defined in the WCAG 2.0 Level A Success Criterion for Guideline 1.1.1 (link resides outside of ibm.com).
- Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.
- Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.
- Null alt text: Use null text on img elements that Assistive Technology should ignore.
Examples for general developers
1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.
There are no specific examples for general developers, please refer to the examples for HTML developers for guidance.
2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.
To comply with this technique, at least one of the following examples must be implemented.
Example 1
Provide a long description in text near the non-text content, with a reference to the location of the long description in the short description
Implement this using one of the html examples below.
Example 2
Provide a long description in another location with a link to it that is immediately adjacent to the non-text content
Implement this using one of the html examples below.
3. Null alt text: Use null alt text on img elements that Assistive Technology should ignore.
There are no specific examples for general developers, please refer to the examples for HTML developers for guidance.
Examples for HTML developers
1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.
To comply with this technique, all of the following examples must be implemented.
Example 3
Use alt attributes on images used as submit buttons
When images are used as Go or Submit buttons on forms, equivalent alternative text must be assigned using the alt attribute.
In this example, the submit button is assigned alt text = "Go" since that is the text on the buttons.
<input type="image" name="Go" src="btn_go.gif" alt="Go" />
Example 4
Combine adjacent image and text links for the same resource
For an image and text that link to the same location, combine both of them by putting both the image and the text inside the same <a> element.
<a href="digg.html"> <img src="digg.gif" alt="" /> Digg This </a>
Digg This Note the null alt text on the example above, since it would be a duplicate of the text.
Example 5
Use alt attributes on img elements
Equivalent alternative text must be assigned to each image on the web page. There are a number of different scenarios for implementing the alt attribute on img elements. If the image is a photograph of a person, the person's name would be appropriate alternative text.
- In the picture below, the alt text for a picture of Sam Palmisano is "Sam Palmisano". It is not necessary to say it is a picture since assistive technology will identify images.
<img src="sam.jpg" alt="Sam Palmisano" width="150" height="175" />In this scenario, the alt text for a picture of Sam Palmisano should be "Sam Palmisano".
- If a persons name appears directly before or after their photograph, it is still important to have the alt text of the graphic. Even though the text may be redundant, the picture provides additional sensory content, and the screen reader user may want to copy and paste the picture to use in a presentation.
- The image below illustrates the proper placement of the glued joint on a packing carton. If the alt text is defined as "Die structure", it is not descriptive enough so the image is not accessible. The appropriate alt text describes the box so a blind user understands how to fold the box.
<img src="diestructure.gif" alt="Proper positioning of the IBM logo on a box die structure will allow it to span a folded edge, not a glued seam" />
- For animated images, such as an advertising banner, equivalent alternative text must be assigned to each image, and it must include all important information from the image.
<img src="125eseed8.gif" alt="www.eseeds.com is an IBM e-business. Click here to see the garden grow. eSeeds flourishing online business was cultivated by expert hands. e-business, sprout, and IBM logos" />
- When images of text are used as links, the ideal alternative text is the exact label contained in the image. For example, if the text for the graphic is labeled "Done," the alternative text should also be labeled "Done".
<img src="done.gif" alt="Done" />
Example 6
Provide text alternatives for strings where look-alike glyphs are used in place of letters (e.g. leetspeak)
If leetspeak or other look-alike glyph is used, the translation is available immediately prior to or following the leetspeak. For example, if the leetspeak h4ck3r5 is written out, it is followed by the word (hackers).
Example 7
Provide text alternatives for ASCII art
ASCII art involves drawing images using the characters from a computer keyboard. For examples, refer to Wikipedia’s entry on ASCII art (link resides outside of ibm.com). Even though the alt attribute can’t be used for ASCII art, text alternatives can be provided for the image, and they should appear prior to the ASCII art. Note: Consider also adding a skip link to skip to the end of the ASCII art. This will provide easier navigation for a screen reader user to find the end of the art.
Example 8
Provide link text that describes the purpose of the link
Instead of providing a URL directly on a page, provide text that tells the user where they are going. For example, "please visit the IBM Accessibility, Human Ability and Accessibility Center homepage". When implementing this technique, links to different URLs should have unique link text.
2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.
To comply with this technique, at least one of the following examples must be implemented.
Example 9
Use the longdesc attribute to point to a URL that contains a detailed description for a complex image or chart. Alt text must still be provided, but the long description provides additional important information about the image.
In the pie chart graphic below, the longdesc attribute provides information about the chart.
<img src="piechart.gif" longdesc="piechart_desc.html" alt="75% cars and 25% trucks." />
The longdesc attribute points to the separate description file (piechart_desc.html) that includes the following sample HTML:
- Pie Chart Description. This pie chart shows the percentage of cars and trucks out of the total vehicles passing through a toll booth in one hour. Cars are represented by the larger red wedge and trucks are represented by the smaller blue wedge. 75% of the vehicles were cars; 25% of the vehicles were trucks. The total number of cars and trucks is not displayed on the pie chart.
Example 10
Using the body of the object element
This example describes a digital camera object that is on the Web page.
<object classid= "http://www.example.com/digitalcamerademo.py"> <p>This is a demo of a digital camera. When the user presses the shutter button, the picture is taken. The image is then shown on the 2 inch LCD screen. </p></object>3. Null alt text: Use null alt text on img elements that Assistive Technology should ignore.
To comply with this technique, all of the following examples must be implemented.
Example 11
Use null alt text and no title attribute
If the image is redundant, unimportant, or used for visual effect, null alternative text should be assigned. Assistive technology will ignore the image, as long as the title attribute is also null.
In this example the spacer image is used for layout and does not add meaning. Null alt text is used to ignore the image.
<img src="placeholder.gif" alt="" title="" />
Examples for Flash developers
1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.
To comply with this technique, all of the following examples must be implemented.
Example 12
Specify that your overall Flash module is accessible to screen readers. This is done in one of the following two ways:
- Using the Accessibility Panel – When nothing is selected on the stage, bring up the Accessibility Panel (Window – Other Panels – Accessibility) and check the boxes for Make movie accessible, Make child objects accessible, and Auto label.
- Using ActionScript - the _accProps property used as a global variable in conjunction with Accessibility.updateProperties() will allow you to control accessibility via ActionScript. Setting _accProps.silent is the equivalent of "Make movie accessible" in the Accessibility Panel. Setting _accProps.forcesimple is the equivalent of "Make child objects accessible" in the Accessibility Panel. See About ActionScript and accessibility (link resides outside of ibm.com) in the Adobe Live Docs for more information on this topic and the use of the _accProps property.
Example 13
Specify a document name and description for your overall Flash module. This is also done through the Accessibility Panel or ActionScript.
- When nothing is selected on the stage, bring up the Accessibility Panel and give the document a name and a description in the applicable fields. Setting _accProps.name is the equivalent of "Name" in the Accessibility Panel. Setting _accProps.description is the equivalent of "Description" in the Accessibility Panel.
Example 14
Using either the Accessibility Panel or ActionScript, provide a name and description for document instances (objects on the stage), including all graphics.
- For all meaningful objects, select the object, bring up the Accessibility Panel and give the document a name and a description.
Using ActionScript, the syntax is the same as above, but the instanceName precedes _accProps i.e. instanceName_accProps.name="";
Example 15
For animations or other changing content, specify that screen readers ignore these elements in your document, and provide one text equivalent for the entire animation. When content is refreshed automatically, as it is with animation, a screen reader by default will begin reading the web content over again as soon as the content changes. This problem can be avoided by either deselecting "Make Object Accessible" for the movie, which prevents the screen reader from receiving any accessibility information about the object, or by deselecting "Make Child Objects Accessible", so that the screen reader does not receive new accessibility information each time a new picture is generated on the screen.
Example 16
Change static text to dynamic text. Text equivalents are not needed for strictly text elements, because the Flash automatically exposes all text elements to a screen reader. However, it is recommended that static text should be changed to dynamic text to ensure a proper reading and tab order.
NOTE: Before adding a text equivalent to a graphic, the object must be saved as a symbol in the library. Since text equivalents are not supported for graphic symbols, save the object as a movie symbol or a button.
2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.
To comply with this technique, all of the following examples must be implemented.
Example 17
Sometimes the alt text is not sufficient to describe a complex image or chart. In that case, a long description must be provided in addition to the alt text so someone using assistive technology would get the same information from the image. The IBM Intranet standards require that all Flash content must have a non-Flash alternative that communicates the same information in a different medium (for example, HTML).
For example, if a Flash object uses animation to show how a customer uses an ATM, a separate static HTML file(s) may also need to be included. In the additional HTML file, everything that the animation is showing would need to be described in text format, without using the Flash technology. Additional "accessible alternatives" could be used in place of static HTML.
3. Null alt text: Use null alt text on img elements that Assistive Technology should ignore.
To comply with this technique, all of the following examples must be implemented.
Example 18
Purely decorative or repetitive clips that convey no meaningful content should be made invisible to the screen reader, by deselecting the "Make Object Accessible" checkbox in the Flash Accessibility panel.
- More information can be found on the Adobe Flash Accessibility Design Guidelines website for Animation (link resides outside of ibm.com).
- More information can be found on the Adobe Flash Accessibility Design Guidelines website for Text Equivalents (link resides outside of ibm.com).
Examples for Domino developers
1. Short text alternative: Provide a short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content.
To comply with this technique, all of the following examples must be implemented.
Screen readers use the text label on a button to describe the purpose of the button similar to the way alt text describes the purpose of an image. If the button label is blank or the label is a graphic or icon, the button is not accessible. When buttons have graphic labels, sighted users can see the label and determine its function. For example, if an action button has a printer icon, a sighted user would know they would use the button to print a document. Someone who is blind uses a screen reader to read the button. The screen reader does not have information about the icon, so it says "button" and the user does not know the purpose of the button.
Example 19
Use the label field.
If the button is a hotspot button, use the following steps to provide a text alternative for the button label.
Select the button and open the Button Properties box. On the Button Info tab, go to the Label field and enter a name for the button. The following example shows how the hotspot button "Start the course" was labeled correctly by using the Label field in the Button properties box.
Example 20
Use the name field.
If the button is an action button, use the following steps to provide a text alternative for the button label:
Select the button and open the Action Properties box. On the Action Info tab, go to the Name field and enter a name for the button. If you include an icon, do not select the option "Only show icon in button bar".
2. Long description: If the short description is not sufficient, provide a long description in addition to a short text alternative.
There are no specific examples for Domino developers.
3. Null alt text: Use null alt text on img elements that Assistive Technology should ignore.
There are no specific examples for Domino developers.
Recommended development techniques
The techniques above are required; the following techniques are recommended to enhance accessibility:
1. Keep short descriptions short.
Alternative text should be kept short and to the point. Do not use the alt attribute to add additional or verbose information. Users who "listen" to alternative text cannot ignore the text as a user viewing the page can ignore the image. In their document, Techniques For Accessibility Evaluation And Repair Tools, the Evaluation and Repair Tools Working Group of the W3C Web Accessibility Initiative recommends a maximum of 150 characters. They also recommend that the target of a link be no greater than 60 characters.
2. Use the title attribute to enhance alternative text for image links.
While it is not required, for images of text used as links, it is recommended to use a title attribute to describe where the link is going. The title can be more descriptive than the alternative text. If provided, graphical browsers will display the title text instead of the alternative text when the mouse pointer is positioned over the image.
In the following code sample, the image uses "alt=Go" and a title attribute of "Finish shopping and check out" which indicates more about will happen when the user selects the image link.
<img src="go.gif" alt="Go" title="Finish shopping and check out" />3. Avoid making an image the target of a link.
When an image is used as the target of a link, there isn't a way to add alt text to the image on the new page. Instead, consider creating a new HTML page, and on that page, add the image. You will then be able to add alt text to the image.
The following code sample shows the correct way to implement an image as the target of a link. The image of my dog is added to a page. The target of the link is image.html which contains the picture of my dog.
<a href="//www.ibm.com/image.html">View the image</a>On the image.html page, include the image element with appropriate alt text.
<img src="mydog.gif" alt="Sample image alt text" />4. Use the WAI-ARIA aria-describedby (link resides outside of ibm.com) property to enhance alternative text for an image.
Required test techniques
The following test tools and techniques are required to test this checkpoint.
Test tools:
Install the following tools to test this checkpoint:
Required accessibility verification test techniques:
Use the following accessibility verification test (AVT) techniques to validate the Web content. It is recommended that these tests be performed in order.
| Action | Result |
|---|---|
|
Test the Web site with a Web syntax analyzer to verify the compliance criteria as follows:
|
Pass:
Fail:
|
| Action | Result |
|---|---|
|
Verify the following compliance criteria with a screen reader.
|
Pass:
Fail:
|
©2009 IBM Corporation
Last updated May 28, 2009.
W3C Recommendation 11 December 2008: http://www.w3.org/TR/WCAG20/ (link resides outside of ibm.com)
Copyright 1994-2009 W3C (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University), All Rights Reserved.