Image Compliance and Accessibility

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 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.0 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.

Go to Article Navigation

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 through a link. View our Linking Images article for more information.

Go to Article Navigation

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.

Go to Article Navigation

In-Article Glossary

Review the Municipal Websites Central Glossary of Terms a comprehensive explanation of the acronyms, abbreviations, and company-specific terminology. The terms located in this section are listed alphabetically.

• ADA: Americans with Disabilities Act
• Alt: Alternative
• WCAG: Web Content Accessibility Guidelines

Go to Article Navigation