Web Accessibility Criteria - Images

•  Introduction
• Alternative Text
• Figure Captions
• Best Practices
• Examples
• Testing Methods
• WCAG 2.1 and References 

 Introduction

When adding non-text content to a website, the non-text content must have a text alternative. Images are a form of non-text content that require a text alternative if the image provides meaningful information. These text alternatives are critical to ensure users with disabilities who cannot see an image can have the text alternative read to them instead. However, text alternatives can also be useful for all users to better understand the purpose of an image. 

Alternative Text

Alternative text or alt text is a text replacement for an image that is used to explain what the image is and what it's trying to convey to the user. This is very important to screen reader users as a screen reader can read the alt text and read it back to the screen reader user. It requires using the alt attribute on an img element.

Alternative text should briefly describe what the picture is conveying:

Syntax:<img alt="text">

Importance of Alt text 

1. The use of alternative text is a principle of accessibility. Alternative text is read by screen readers to provide a description of image to its user.
2. If an image fails to load, alternative text is shown to give the user information about the image.

Decorative Images & Alt text 

When images are used for decoration and serve no other purpose than aesthetics, they require an empty alt attribute or null alt text (alt = “”). The reason why an empty alt attribute would be used instead of not having an alt text is because the empty alt text allows screen readers to skip over the image.  

If the image is a decorative image (background image), it does not need alternative text. All decorative images should have the “null” attribute.

Syntax:<img alt=""> 

Figure Captions

The best method to provide alternative description to users is by using figure captions. Images can have figure captions associated to them that will not only be read by a screen reader but can provide additional information to sighted users. At times, an alternative text might provide more information to assistive technology users giving a disadvantaged to sighted users. Moreover, alternative text can be an inconvenience to assistive technology users when it becomes too long. Figure captions are located either below or above the image to associate the description and image.

Syntax: <figure> <figcaption> text </figcaption> </figure>

Back To Top 

 Best Practice

Visit the Best Practices for Accessible Images web page for more tips and tricks for image accessibility.

• The alternative text must accurately represent the image.
• Do not use the phrases “image of” or “graphic of” in the alternative text.
• The best method to practice is using captions; this will provide equal access to all users.
• If images have text within them, the alternative text should include the embedded text and a brief description of the image.
• Alternative text should be within 8 to 80 characters long. If it is too long, use a complex image description.
• If the image is a link, both the image and the link will require a description.
• The alt text should explain where the link goes if the image is inside an <a> element along with the ARIA-label attribute.
• Decorative images do not need alternative text. (alt=””)
• Complex images require additional text descriptions that should be provided on the page. Refer to the Best Practices for Accessible Images for more information.

Back To Top 

 Examples

Example 1: Alt Text 

The image below is a meaningful image that needs a text alternative via alt text or caption. If alt text were used good alternative text for this image would be: <Img Alt= "Duck swimming in a pond"> 

Example 2: Figure Captions

The example below is another meaningful image that needs either alt text or a caption.  If a caption were used, it could provide additional context may not otherwise be seen in the image. 

For more examples go to Best Practices for Accessible Images

Back To Top 

 Testing Methods 

Manual Review

1. Review each img element and ensure it has the alt attribute.
   1. If the alt attribute is present, examine if the alternative text within the alt attribute contains a short and meaningful description of the image.
   2. If the alt attribute is not present, look to see if there is an alternative image description method (e.g., caption, description within the text, linked image methods, etc.)
   1. Review the text alternative to determine if it is a meaningful description of the image

Automated Testing Tools

Web Developer Extension

1. Open the Web Developer toolbar on your browser (Chrome, Firefox)
2. Navigate to the Images column
3. Select “Display Alt Attributes”
4. Manually review the alternative texts to see if they meet the guidelines. 

WebAIM WAVE tool

Activate the WAVE toolbar and navigate to the “Details” panel. Use “Errors, Features, and Alerts” to check all the alternative text that is present on the webpage.

The following icons are accessibility errors related to images found by WAVE: 

• :  indicates the image is missing an alternative text
• :  Spacer image missing an alternative text
• : indicates linked image is missing an alternative text
• : indicates the image button is missing an alternative text
• : indicates image map is missing an alternative text
• : Image has a long description 

Back To Top 

 WCAG 2.1 and References