Impact
Images can cause barriers to people with disabilities but when they are made accessible they can improve the experience for all.
People with cognitive and learning disabilities: Images and graphics make content easier to understand.
People using screen readers: The text alternative can be read aloud or rendered as Braille.
People using speech input software: Users can put the focus onto a button or linked image with a single voice command.
People browsing speech-enabled websites: The text alternative can be read aloud.
Mobile web users: Images can be turned off, especially for data-roaming.
Search engine optimization: Images become indexable by search engines.
How to
Only use images that serve a purpose. When in doubt, it’s best to sacrifice beauty for accessibility and usability.
- Branding
- Photos or illustrations that contribute to the story that the content is telling (e.g., happy, healthy families on a health and wellness-focused website)
- Maps
- Informative illustrations, charts, and graphs
- Icons
- Animations
Always include alternative (alt) text
All images must include alternative text that can adequately portray the content or function of the image.
- Be descriptive in presenting the same content and function of the image as clearly as possible.
- Don’t be redundant. If the same information is provided within the text of the document, use, “” (empty apostrophes) as the alt text so that the screen reader skips that image.
- Don’t use the phrases “image of” or “table of” as this is usually clear to the user.
- Don’t use quotation marks or apostrophes within alt-text, as screen readers will interpret these punctuation marks as the end of the alt-text, and read them aloud as HTML characters.
Alt text for complex images
Alt text is an essential component of accessibility but sometimes a graphic or visual component is too complex to be adequately explained in character-limited alt tags. Examples of complex images include:
- Graphics and infographics
- Graphs, tables and diagrams
- Maps
- Images with substantial information
If you cannot clearly describe an image within the alt text’s character limit or in the text, you will need to create a separate (accessible) document or webpage with a “long description” of the image. Long descriptions provide blind/low-vision readers with more comprehensive and meaningful information about a complex image.
They contain a breakdown of every important element in a complex image including the text in the visual, a description of any graphs or charts and interpretations of data that can be inferred from charts or tables. So that the reader is aware, add alt text to briefly describe the image and identify the location/link to the long description.
Here is an example of a graph with a link to a long description from the W3C.
Learn more about how to add alt text to complex images:
- Alternative Text, WebAIM
- Complex Images with examples, W3C
- Write good Alt Text to describe images, Harvard University
Learn more
- Images Concepts tutorial, W3C WAI
Resources for State of Colorado Agencies
Siteimprove: Siteimprove’s software helps to improve State website usability and accessibility by automating the process of finding errors and problems. Siteimprove alone will not make websites accessible but is part of a holistic approach to managing web services.
For questions about using Siteimprove, please contact the Technology Accessibility Program at OIT_Accessibility@state.co.us.
Don't have access to Siteimprove? Use these free browser extensions:
Accessibility Standards
State of Colorado Accessibility Statement
§24-85-103, C.R.S. - "Accessibility standards for individuals with a disability", (PDF)
TS-OEA-001: Technology Accessibility for Persons with Disabilities, (PDF)
TS-OEA-002: Technology Accessibility for Web Content and Applications, (PDF)
Section 508 of the U.S. Rehabilitation Act of 1973, section508.gov