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 Alt Text to keep your images compliant with the WCAG and the ADA guidelines.
- 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 Assets (formerly, 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 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.
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 Link an Image article for more information.
- 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 the Slideshow Widget to Your Page article for more information.
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