Supplemental Images

Supplemental images are those images that supplement textual material but do not convey additional content. 

Example:

This image of young students in the classroom appears in a book on exceptional learners, with the following caption text, “Over representation of culturally and linguistically diverse students in special education placements remains a problem today.” The text includes statistics on the number of students receiving special education services by race/ethnicity.

In this case, the image adds no more detail or information to the text. When an image simply enhances the text with a visual, mark it as supplemental on the alt text template and provide short, simple alt text that describes the image. The reason for simple alt text in this instance is that while this image might not require alt text in the content narrative, it might be picked up in a widget or PPT presentation where it would require alt text. By marking it as supplemental, one of Pearson’s vendors can code it properly for a Revel or eText 2.0 product, but another team working on widgets or the PPT will have access to that alt text if needed.

Alt text = Ethnically diverse students in a classroom.

How to Implement

This section lists the techniques that need to be implemented to ensure accurate textual descriptions are provided for supplemental images.

Designers Need to…

• Define all supplemental images using the <img> element.
• Specify text descriptions for supplemental images using:
  • alt attribute
  • aria-label, aria-labelledby or aria-describedby.
    
    Note: Title attribute is not an alternative to the alt attribute for the <img> element.

Content Writers Need to…

• Provide unique, descriptive, and accurate alternate text for supplemental images.
• Provide descriptions that accurately convey the purpose of the image.
• The textual 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 students with sight.
• If a supplemental image includes text, then the alternate text should include all the textual information available on the image.
• Alternative text should be no more than 255 characters including spaces (approximately 30 words or less) and present a summary of the image. 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 fully explained in 255 characters including spaces, a long description is required. 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, you will need to use a long description, even if the image can be described in about 30 words or less. Alternative text is required with all long descriptions.

Practices to Apply & Avoid

How to Test for Accessibility

To test a web page for supplemental images, perform the following steps:

1. Open the page in Google Chrome web browser.
2. Open the Web Developer extension. The extension is freely available on Chrome store.
3. Click on the “Display Alt Attributes” option in the “Images” tab.
4. All the images with alternative text specified will be displayed.
5. Check if accurate, unique, and descriptive alternate text is provided for supplemental images.
6. Check if the supplemental images are visible in Windows High Contrast mode.
7. 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.

Dated: 2023-12-01