With how many different types of images can be used on a site, there are some ways to make them accessible to all. In this article, you'll learn about some Best Practices for Alternate (Alt) Text to keep your images compliant with the Web Content Accessibility Guidelines (WCAG) and the Americans with Disabilities Act (ADA) guidelines.

Compliance Notes 

• Ensure that all images have appropriate and compliant alt text.
• Do not place decorative images, stock photos, or clip art on the page. Place these images in the image repository and then leave a customer note as to why they are not on the page.
• Animated images should not be placed on the page. Place them in the image repository and leave a customer note as to why they are not on the page.

Complex Images 

Complex images are images containing charts, graphs, text, maps, or other information. These images alone are not compliant.

• Alt text must describe the information in the image if possible.
• All text displayed in the image should be used as alt text. There is a 100-character limit to alt text, so this is not always possible.
• A link should be provided to an accessible format of the information, and alt text should provide the general function.
• Note to the customer to provide an accessible version if none is available.

Example

This complex image is a graph denoting unemployment by year. While the tooltip (Unemployment by Year Graph) explains what the image is about, it does not convey to users with a screen reader the information that sighted users are getting (what the unemployment was each year.)

This graph needs to be available in a compliant form via a link. View our Link an Image article for more information.

Slideshow Compliance

• Ensure that slideshows have four images or fewer. If there are more than four images, consider placing them in a photo gallery instead.
• Ensure that each image has compliant alt text.
• Keep the next and previous arrows and pagination options enabled. 
• Charts, graphs, maps, and images with text (complex images) should not be used in slideshows.
• View our article Add the Slideshow Widget to Your Page for more information.