Guideline 1.1: Provide text alternatives

Principle 1: Perceivable

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Text can be rendered in a visual, oral or tactile way. Even by any combination of them. So text information can be presented and manipulated in whatever form best meets the user needs. For example, a blind person can understand a picture if her browsers reads aloud the text alternative. Or a deaf person can understand an audio file if there is a text alternative on the screen.

Criterion 1.1.1. Non-text Content

All “non-text content” that is presented to the user has a “text alternative” that serves the equivalent purpose (Level A)

Examples

  • Data charts: Provide a short label (e.g. “Weather records in Spain from 1909 to 2009″); a longer description with a high-level summary of the data, trends and implications (e.g. “Timeline shows the rising of the temperature while the rain is descending. Most remarkable data are…”); and if possible and practical, the data in a table.
  • Audio recordings: Step 1. Text inside the link describes its content (e.g. “Barack Obama’s speech at the UN. May 2009.”). Step 2. Immediately after that, provide a link to a text transcript. If there are two or more speakers, identify when is speaking each one, just as applause, laughter, etc.
  • Sound effects: Provide text indicating what it means (e.g. an error fulfilling a form)
  • Animations that illustrate a subject: Make sure that the text alternative provide the full explanation, the animation must be a complement.
  • Live Web-cams: Provide a short text that identify the camera and when how often it reloads the image.
  • Photographs and content images: Provide an alternative text that describes them and their context (the old way “alt” and “longdesc” is ok)
  • Thumbnail images with links : Provide an “alt” with the text you should include if no image is given
  • Image maps : Provide an “alt” for the image, including its interactive purpose (e.g. “Europe Map. Select the country you want to travel.”. Each image map area should include an alt.

Exceptions

  • Controls, Input: If non-text content is a control or accepts user input, provide a “name” that describes its purpose. (Guideline 4.1)
  • Time-Based Media: Provide text alternatives that gives descriptive identification of the non-text content. (Guideline 1.2)
  • Live Audio-only and live video-only content: It is more difficult to provide text alternatives that provide equivalent information as live audio-only and live video-only content. For these types of non-text content, text alternatives provide a descriptive label.
  • Tests: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • Specific sensory experience: If you have used a non-text content to create a specific sensory experience, provide a description and it purpose.
  • Decoration, Formatting, Invisible: WCAG Samurais, repeat with me: WTF???. Although CSS is strongly recommended, you are allowed to use invisible images to format text or smoothing corners. Just implement them in a way that they can be ignored by assistive technology (alt=”").
  • CAPTCHA: Use different output modes for different types of sensory perception are provided to accommodate different disabilities. For example, provide 2 or more modalities of CAPTCHAs, a human customer service representative or not requiring CAPTCHAs for authorized users.

How to. Mandatory techniques

Short text alternatives
  • Use alt attributes on images used as submit buttons
  • Combine adjacent image and text links for the same resource
  • Use alt attributes on img elements
  • Provide text alternatives on applet elements
  • Use the body of the object element
  • Provide text alternatives for the area elements of image maps
  • Provide text alternatives for ASCII art, emoticons, and leetspeak
  • Provide link text that describes the purpose of a link for anchor elements
  • Use a text alternative on one item within a group of images that describes all items in the group
Long text alternative
  • Use longdesc
  • Use the body of the object element

Additional, Advisory Techniques

General Techniques for Informative Non-Text Content
  • Identify informative non-text content
  • Keep short descriptions short
  • Describe images that include text
  • Provide a longer description of the non-text content where only a descriptive label is required using a technology-specific technique (for an accessibility-supported content technology) for long description listed above
  • Provide different sizes for non-text content when it cannot have an equivalent accessible alternative
  • Use server-side scripts to resize images of text
General Techniques for Live Non-Text Content
  • Link to textual information that provides comparable information (e.g., for a traffic Webcam, a municipality could provide a link to the text traffic report.)
HTML Techniques
  • Use noembed with embed
  • Write for browsers that do not support frames
  • Provide alternative content for iframe
  • Provide text and non-text alternatives for object
  • Not using long descriptions for iframe
  • Providing redundant text links for client-side image maps
CSS Techniques
  • Use CSS box rules instead of spacer images for layout design (CSS)
  • Use CSS background, :before or :after rules for decorative images instead of img elements
  • Display empty table cells
ARIA Techniques
  • Use the ARIA presentation role to indicate elements are purely presentational
Metadata Techniques
  • Use metadata to associate text transcriptions with a video
  • Use metadata to associate text transcriptions with audio-only content, e.g. providing, in metadata, URI(s) that points to an audio description and a text transcript of a video or audio file

Common Failures

  • Using alternative text that are not descriptive. E.g. alt=”spacer” , alt=”icon.jpg”, alt=”image2″…
  • Providing a text alternative that is not null for images that should be ignored
  • Omitting the alt-attribute for non-text content used for decorative purposes only in HTML
  • Not updating text alternatives when changes to non-text content occur, e.g. in a date chart.
  • Using CSS to include images that convey important information
  • Using text look-alikes to represent text without providing a text alternative
  • Using ASCII art without providing a text alternative
  • Omitting the alt attribute on img elements, area elements, and input elements of type “image”
  • Providing long description for non-text content that serve purpose or does not present the same information

More info

Link Summary