The web is a visual medium, which is a great way to convey information…unless you’re blind. An image, or other visual content, is only informative if users can see it. So making images perceivable is one of the most important ways to make websites accessible.
This is why the WCAG 2.0 standards require web developers to “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.” When text alternatives are not provided, or not provided well, many users will not be able to read, understand, and interact with your content.
ALT-TEXT GUIDELINES
All images must have alt-text. In HTML, this means using the alt attribute on the img element. The ALT attribute value should be less than 100 characters and should be as concise as possible.
Different types of images need different types of alt text so consider the image’s purpose when writing alternative text:
Images that convey information
These images are not links or buttons but convey information for users viewing the page. The alt attribute should convey the same information as the image conveys to sighted uses.
- Images that convey information should not be defined as background images unless a text equivalent is provided in the HTML code that can be seen in Windows High Contrast mode.
- Avoid using phrases such as “image of,” “graphic of,” or “click here”. Screen readers announce images as graphics.
- Describe the appearance of a particular object only if it conveys information. Consider the image context and the surrounding content to determine what information the image conveys. For example, an image of a cloud will take different alt-text on a meteorological site than on a page about cloud computing.
Active images
Active images are often links, including image map areas, controls, or buttons. The alt text gives the function of the image or briefly presents the purpose of the link target. Most of the time, the text in the image should be the alternative text. For example, if you use a button image with the text “Submit” on it, the alt-text should be alt="Submit".
- If the image identifies a specific state (e.g., expand or collapse), the alt text should also describe the state.
- If an image and text are used in the same anchor and the image conveys no additional information than the text, then image should use the empty alt attribute (
alt=""). - Do not use an empty alt attribute (
alt="") if the image is the only element in the link anchor. - Provide alt text for the main image and every area in image maps.
- Avoid using phrases such as “image of,” “graphic of,” or “click here.”
Larger images
Larger images includes charts, graphs, diagrams, and even some photos. These are images that cannot be explained in 75-100 characters of alt text. To make these images accessible, provide a short alt-text on the image and have information also presented in an alternative format such as table, list or text so that non-visual users can get the same inforrmation. This extra information can be presented as separate page and referenced using longdesc attribute or could be text on the same page. (More coming on this in a future blog post)
Unimportant images
Images that are decorative, redundant or for spacing convey no information and should be coded to be ignored by assistive technology. In HTML, set alt-text to null, or empty: alt="" (no spaces). Decorative images may also be coded as CSS background images. Examples include spacer.gif graphics used for page formatting and images that are redundant to the page text such as a product image where the product name is in the text.
- If the image is simply “eye-candy” authors should either use the empty alt attribute (
alt=""; no spaces in the alt attribute) or implement the image in CSS or HTML as a background image. - Similarly, formatting images used to insert space in a page layout or produce rounded corners on tabs should use the empty alt attribute (
alt="").
CSS Images
These images are defined in the CSS and may or may not convey information.
- If the image conveys no information, nothing further is required since screen readers ignore CSS images.
- If the background image conveys information
- Add text to the page that is visible when the image cannot be seen
- Use High-Contrast friendly icons. See Techniques for High-Contrast-Friendly Icons for ways to add images that will be shown in Windows High Contrast mode.
- Add the image to the HTML page with appropriate alt-text
- Use text on the page with CSS to accomplish the same look and feel of the image
Images of text
- Images of text should be avoided. However, if they must be used, the alt text should (usually) be the same as the text in the image.
- Rather than images of text, use text and style with CSS.
CAPTCHAs,
Images of characters that test for human users should be avoided. However, if they must be used, an equivalent such as an audio CAPTCHA should be used, including instructions for how to find the alternative.
REFERENCES
WCAG 2.0 Guideline
- Guideline 1.1 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
- Success 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.
WCAG 2.0 Techniques for Images
- G92: Providing long description for non-text content that serves the same purpose and presents the same information
- G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
- G95: Providing short text alternatives that provide a brief description of the non-text content
- G143: Providing a text alternative that describes the purpose of the CAPTCHA
- G196: Using a text alternative on one item within a group of images that describes all items in the group
- H2: Combining adjacent image and text links for the same resource
- H24: Providing text alternatives for the area elements of image maps
- H30: Providing link text that describes the purpose of a link for anchor elements
- H35: Providing text alternatives on applet elements
- H36: Using alt attributes on images used as submit buttons
- H37: Using alt attributes on img elements
- H67: Using null alt text and no title attribute on img elements for images that AT should ignore
- C9: Using CSS to include decorative images
- C30: Using CSS to replace text with images of text and providing user interface controls to switch