With so many different types of images that can be used on a site, there are some ways to make them accessible to all. In this article, you will learn about some best practices for Alt Text to keep your images compliant with the WCAG and the ADA guidelines.
Important Note
CivicPlus works toward WCAG 2.1 AA accessibility standards, and our websites are highly compliant when they go live. However, ongoing ADA compliance and maintenance is the customer's responsibility
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 Public Images (formerly, Public Assets) 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.
Complex Image 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 through a link. View our Linking Images 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 Add a Slideshow Widget to Your Page article for more information