Creating Accessible Content: Images and Graphics

Images and graphics should work for everyone, including people using screen readers or other assistive technologies. Alt text, long descriptions, sufficient color contrast and other best practices help create a more inclusive experience for all users.

Use the guidance on this page to help make images and graphics accessible across websites, course materials, communications and other university content.

Who Is Responsible?

Anyone who uses images and graphics for instruction, communication, marketing, promotion or other academic or business purposes is responsible for helping ensure that the content is accessible.

What Standards Must Be Met?

Content that includes images and graphics should align with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA and support the requirements of Title II of the Americans with Disabilities Act (ADA).

What to Do

Use the following best practices to help ensure images and graphics are accessible to all users.

1. Write descriptive alt text: Provide concise, meaningful alternative text for informational images that describes the content and purpose. For complex images, provide a longer description in surrounding text or another accessible format.
2. Mark decorative images appropriately: Decorative images that do not add meaning should be marked so assistive technologies can ignore them.
3. Ensure sufficient color contrast: Use enough contrast between foreground and background elements so text and graphics are easy to distinguish.
4. Avoid color-only communication: Do not rely on color alone to communicate meaning. Use labels, patterns, shapes or text in addition to color.
5. Provide long descriptions for complex graphics: Charts, graphs, infographics and diagrams often need more than alt text. Include a text summary or longer explanation that communicates key information.
6. Use clear, readable images: Make sure images are sharp and legible, especially when they include important details or embedded text.
7. Avoid images of text when possible: Use real text instead of text embedded in images. If an image of text is necessary, provide the same text in an accessible format and ensure the image remains readable.
8. Make charts and graphs accessible: Provide summaries for data visualizations and consider offering data tables when appropriate.
9. Check zoom and responsiveness: Make sure images remain clear and usable when magnified or viewed on different screen sizes.

Support

Support is available to help ensure images and graphics meet accessibility expectations:

• Academic departments: Contact the Center for Excellence in Teaching and Learning (CETL) for guidance on instructional materials and course content
• Administrative departments: Contact Web Operations for guidance on website content, images and digital publishing
• Technical support: Contact IT Support for assistance with systems, platforms or tools

What Tools Are Available?

• Accessible Web WCAG Color Contrast Checker
• WebAIM Contrast Checker

Training and Resources

• WebAIM: Accessible Images
• WebAIM: Alternative Text
• W3C WAI Images Tutorial