Creating Accessible Content: Images, Graphics, and Design Elements

Images and graphics must be accessible to all users, including individuals who use screen readers and other assistive technologies. Providing appropriate alternative text, long descriptions when needed, sufficient color contrast, and other accessibility best practices helps ensure an inclusive and equitable experience across digital content.

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

Roles and Responsibilities

Creating accessible images and graphics is a shared responsibility across the university. Anyone who adds images, charts, diagrams, icons, flyers, social media graphics, screenshots, or other visual content to university materials should make sure that information conveyed visually is also available in an accessible form. That includes faculty creating course materials, staff preparing documents or websites, and offices producing communications or marketing content.

Accessibility Standards

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

How to Get Started

Start with the purpose of the image. Ask: Why is this here, and what does a user need from it?

1. Identify the image type
   • Informative image: conveys content that users need to understand
   • Decorative image: adds visual interest only
   • Functional image: acts as a link or button
   • Complex image: contains detailed information, such as a chart, infographic, map, or process diagram
2. Write effective alt text
   • Keep it concise and meaningful
   • Describe the content and purpose, not every visual detail
   • Avoid starting with “image of” or “picture of”
   • Do not repeat nearby text word for word
   • If the image is decorative, mark it as decorative instead of forcing unnecessary alt text
3. Handle complex graphics differently
   For charts, graphs, infographics, and diagrams:
   • provide a brief alt text that identifies the graphic
   • include a text summary of the key takeaway nearby
   • include the data in a table when appropriate
   • explain trends, comparisons, or conclusions in the surrounding text
4. Avoid images of text whenever possible
   Use real text instead of putting important words inside an image. If an image must include text, provide the same information in accessible text nearby and make sure the image remains legible.
5. Check color and contrast
   • Make sure text over images is easy to read
   • Ensure important icons, lines, and graphic elements are visible
   • Do not communicate meaning by color alone
   • For charts, consider labels, textures, and patterns so categories remain distinguishable for all users
6. Test images and graphics before publishing
   • Zoom in to make sure text and details remain readable
   • Test on a mobile device to confirm images and charts do not require horizontal scrolling

Accessibility Tools

• Accessible Web WCAG Color Contrast Checker
• WebAIM Contrast Checker

Training and Resources

• WebAIM: Accessible Images
• WebAIM: Alternative Text
• W3C WAI Images Tutorial
• CETL Teaching Resources available in Canvas
• ITS Knowledge Article - Creating Inclusive Content: Universal Design

Get Help

To request training or learn more about available opportunities, contact the appropriate area:

• Academic content:  Center for Excellence in Teaching and Learning (CETL) 
• Website, social and university communication content: Web Operations
• Instructional technology, supported tools and software: Information Technology and Support Services