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 “
- 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 ( “
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
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.)
- 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
- 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
- Use the ARIA presentation role to indicate elements are purely presentational
- 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
- 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