Informative images visually represent important information, typically pictures, photos, and illustrations. They must have a text alternative that must be short and descriptive.
How to Implement
This section lists the techniques that need to be implemented to ensure correct textual descriptions are supplied for informative images.
Designers Need to…
Identify all images in a design.
Specify text descriptions for informative images.
Identify which images are decorative
Content Writers Need to…
Supply unique, descriptive, and correct alternative text for informative images or make sure that text describing the content of the image is visible and readable in close proximity to the image.
Only identify the image type in the alt text if it’s important to understand the information in the image.
The importance of the image type depends on context (i.e., image purpose). For example, if a photo is meant to demonstrate the effects of using certain camera filters, then it should be identified as a “photo.”
Always identify the following image types at the beginning of the alt text: graphs, line graphs, bar graphs, pie charts, flow charts, tree diagrams, box plots, stem and leaf plots, and micrographs.
Descriptions should not include words such as “image of”, “photo of”, “graphic of” etc. unless it’s important to the understanding of the information or interpretation of the image.
Alternative text should not explicitly give away the answer to a problem or test question. When possible, the description should not state information that is not available to sighted students.
If an informative image includes text, the alternative text must include all the text visible on the image.
Alternative text must not exceed 255 characters (approximately 30 words). Alternative text descriptions must be in plain text. They cannot support superscript characters, bulleted lists, or tables. All non-decorative images or figures require alternative text.
If an image cannot be explained in 255 characters including spaces or less, a long description is needed. Long descriptions can be of any length and can be presented as structured text–such as bulleted lists, headings, and tables, including data tables. If structured text is required to describe an image, you will need to use a long description, even if the image can be described in less than 255 characters of structured text. Alternative text announcing the presence of a long description is needed when using long descriptions. For more information, see Complex Images: Graphs, Charts, and Diagrams.
Practices to Apply & Avoid
Add descriptive alternative text for information images. Descriptive alternative text is provided in less than 255 characters for the image below. Alt text = “Young woman holding a controller in her right hand and a sensor near her mouth, in her left hand. A wire from the sensor is connected to her sunglasses, which has a camera mounted on it.”
Ensure the alternative text describes the image so a student can find the answer visually presented by the image but make sure the alternative text does not give away the answer to a problem or test question. Example:
Inaccessible alt text = “A list of six elements with the atomic mass and atomic number of each element shown.” (No long description was given)
Accessible alt text = “Isotopes for six elements show the atomic mass as a superscript and the atomic number as a subscript both to the left of the element symbol. The element symbol, atomic mass, and atomic number for the six elements are as follows: first isotope C, 12, 6, second isotope O, 16, 8, third isotope H, 1, 1, fourth isotope N, 14, 7, fifth isotope S, 32, 16, sixth isotope P, 31, 15.”
Ensure that all informative images are defined through the HTML <img> tag or through CSS content properties and include a textual description in the mark-up.
For example, on the Pearson Sign in page, the “Pearson” logo image is defined using <img> element and correct textual description is specified for the same using “alt” attribute. <img src=”pearsonlogo.jpg” alt=”Pearson Logo”>
All images presented using the <img> element need alt attributes. If the image is decorative, the alt value should be empty. If it’s informative, it should contain alt text.
Do not specify inaccurate alternate text for any informative images. In the Pearson Revel course, the inaccurate alternative text of “Butterscotch Cake 200304” is supplied for the “Pearson” logo image.
How to Test for Accessibility
To test a web page for informative images, perform the following steps:
Open the page in Google Chrome web browser.
Open the Web Developer extension. The extension is freely available on Chrome store.
Click on the “Display Alt Attributes” option in the “Images” tab.
All the images with alternate text specified will be displayed.
Check if exact, unique, and descriptive alternate text is provided for informative images.
Check if the informative images are visible in Windows High Contrast mode.
If the conditions in steps 5 and 6 fail, then it is an accessibility violation as per WCAG 2.1 success criteria 1.1.1 at Level A.
Note: If unable to install the Web Developer extension, you can use any testing tool of your choice.
