Guideline 1.1: Provide text alternatives

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.

1.1.1. Non-text Content Level A

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

What is non-text content? How to provide alternatives? Here some 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: Describe the content of the audio inside the link (e.g. “Barack Obama’s speech at the United Nations, May 2009.”), and inmediately 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 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” .
  • Controls or Input fields: Provide a “name” that describes its purpose. (Guideline 4.1)
  • Time-Based Media: Provide text alternatives that describe the non-text content. (Guideline 1.2)

Exceptions for this rule

  • It is very difficult to give equivalent information for live Audio-only and live video-only content, so provide a descriptive label.
  • If the non-text content would be invalid if presented in text, for example a test or exam,  then text alternatives at least provide descriptive identification of the non-text content.
  • If you use a CAPTCHA, different output modes for different types of sensory perception are provided to accommodate different disabilities. For example, provide two or more modalities of CAPTCHAs, a human customer service representative or not requiring CAPTCHAs for authorized users.
  • If you have used a non-text content to create a specific sensory experience, provide a description and it purpose.
  • Decoration, Formatting, Invisible: 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=''“).

Compulsory

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

Recommended

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

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 a text alternative
  • Omitting the alt attribute on img, area, and input elements of type “image”
  • Providing long descriptions for non-text content that does not present the same information

More info