Images & Complex Visuals

Anyone who designs, uses or maintains visual content for their work at U-M (i.e. university courses, websites, branding materials, presentations).

Everyone:

• Alt Text Best Practices (U-M Resource | Estimated time to complete: 10 minutes)
• Accessible Images (WebAIM | Estimated time to complete: 15 minutes)
• Alternative Text for Websites (WebAIM | Estimated time to complete: 20 minutes)
• Image Description Guidelines (Diagram Center | Estimated time to complete: 3 hours)
• Accessible Web Images and Media Training (U-M Canvas Course | Estimated time to complete: 10 minutes)

Web Developers:

• Images Tutorial (Web Accessibility Initiative | Estimated time to complete: 1 hour)

Designers and Content Creators:

• Image Design Accessibility (LinkedIn Learning | Estimated time to complete: 10 min)
• Learn about accessibility in specific design applications: Adobe Illustrator, Adobe InDesign, Adobe Express, Canva

• Instructors who use visual content in their courses
• Web content and social media content managers
• Graphic designers

Step 1: Inventory your visuals

For those that maintain image galleries, have a set of images that are used frequently in different materials, or design complex visuals for others, it may be helpful to create an image inventory.

Use the images and complex visuals inventory template (or create your own system) to document the information that will help to prioritize files for remediation, determine which type of remediation is necessary, and keep track of developed alt text. 

Step 2: Assess use

1. Is the image file still current/in use? If not, consider if the file qualifies for archiving under Title II of the ADA. Eligible, properly archived image files do not require proactive remediation.
2. Is the visual either located on a main webpage, required to perform well in a course, or frequently shared/viewed? If yes, mark "high priority content.”

Step 3: Prioritize for remediation

Files that don't require remediation:

• Files that are archived
• Decorative images that are "artifacted" or marked as decorative
• Simple images with accurate alternative text
• Complex visuals with accurate alt text and long text descriptions accompanying the content

For all other image files, prioritization recommendations are below.

High priority: Image files that are marked "high priority content" in step 2b. Visuals that contain text, data or key information that are missing alt text and/or long text descriptions.

Lower priority: Decorative images and all other image files, which have alt text, but may require editing, or have poor color contrast.

Step 4: Assess accessibility

1. If the image contains text, is the color contrast between the text color and the background color sufficient? You can check this using a color contrast checker (look for a ratio of 4.5:1). If not, mark for remediation. Also mark for remediation if it is a screenshot/capture of a paragraph/block of text.
2. If the image is purely decorative (used for layouts or aesthetics, does not communicate information or perform a function), is it "artifacted," "marked as decorative", or has null (alt=””) alt text on a website? If yes, mark accessible. If not, mark for remediation. If you are unsure, move to step 2c.
3. Does the image have alt text? If not, mark for remediation.
4. Is the alt text accurate? To determine accuracy, ensure that the alt text is not simply the file name, and that any significant text or data within the visual is included in the alt text. If you're unsure, a good way to gauge sufficient alt text is to think about if you were describing the visual over the phone to someone - what information would you include to help them understand the visual within that specific context? If the alt text is sufficient, mark as accessible and continue. If not accurate, mark for remediation.
5. If the image is a complex visual (such as a custom design, infographic, chart, or map), is there a detailed text description accompanying the visual (i.e. text on a webpage, presentation slide, or within a document)? If yes, mark accessible. If no, mark for remediation.

Units and teams will need to determine who is responsible for remediating image files. Those that maintain or use image files can be responsible for adding alt text and long descriptions. Access issues with legibility, color contrast or other design aspects likely need to be addressed by the original designer or owner.

Informative (non-decorative) images should have descriptive alt text. Complex visuals should have a long text description accompanying them. Decorative images should either be marked as such, or also have alt text. Complex visuals should have a minimum color contrast ratio of 4.5:1, legible text, and should not rely on color alone to convey meaning.

For more specific guidance on complex visuals, use these resources for accessible map design, chart and graph accessibility, infographic accessibility, flowchart accessibility, accessible animation guidelines, and diagram accessibility.

Follow alt text best practices and color contrast best practices.

Start by reviewing best practices for alt text & color.

Image files you created/own:

1. If it is a screenshot/capture of only text (especially a paragraph, or large blocks of text), avoid using an image format if possible. Instead, provide it as actual text (text you can select or highlight with your mouse/trackpad). If the image formatting of the text is critical to the context/function of the visual (or is part of a larger complex visual), then provide the actual text as an alternative format alongside it.
2. If this is a complex visual containing text, check that the color contrast ratio between the text and background is sufficient, and that you are not using color alone to convey meaning. Edit the original source file if needed. Use the U-M Accessible Branded Color Palette if helpful.
3. If you are sharing this image with others (to be added to a web page, document, slide deck, etc.) include written alt text if you are able to.

Image files you didn't create/don't own:

1. For informative (non-decorative) images, you should always add alt text. This includes icons, logos, and more complex visuals like maps, tables, or charts.
2. For decorative images, the following applications offer an option to mark the object as decorative or "artifact" the image: Adobe Acrobat Pro, Adobe InDesign, Canva, Canvas, Microsoft Suite, and Websites (alt text should be left blank, or <alt=""> null attribute for HTML code). Note that Google Suite does NOT offer an option for marking an image as decorative. In any case where you can add alt text, but do not see an option to "mark as decorative," add a very brief alt text description.
3. For complex visuals, include a long text description accompanying the image. This allows you to keep the alt text more concise when describing an image with many different elements. Depending on where the image is being used, the long description can appear within the document or webpage, or linked to elsewhere. If the image is a screenshot of a complex visual, consider pointing to or formatting the contents in a different way (i.e. use actual text rather than a screenshot of text, use a table rather than an image of a table, etc.) - it is almost always easier to make the original source content accessible than it is to remediate a flat image version of something.

CAUTION: If using an AI tool to generate alt text for your images, be sure to review and verify the accuracy of the alt text before publishing it. Be aware of potential data security concerns if using non U-M AI tools to generate alt text for your images. Platforms that offer an AI-generated alt text include Microsoft Office, Canva, Grackle, and Panorama.

Use the following links to access instructions for adding alt text in each platform:

• Adobe Acrobat Pro Alt Text
• Adobe InDesign Alt Text (video)
• Canva Alt Text
• Canvas Alt Text
• Gmail Alt Text (video)
• Google Suite Alt Text (Docs, Sheets, Slides)
• Microsoft Suite Alt Text (Word, PowerPoint, Excel)
• Social Media Alt Text:
  • Facebook
  • Instagram
  • Twitter
  • LinkedIn
  • TikTok (video captions)
• Websites:
  • Alt Text Decision Tree for Websites (When to use alt text for different elements and how to add it appropriately)
  • AEM Alt Text (video)
  • Drupal Alt Text
  • HTML Alt Text
  • WordPress Alt Text

• Wolverine Describer (U-M Flint)
• AI Helper Alt Text Generator (U-M College of Engineering)
• Microsoft Office Automatic Alt Text Generator

• Individuals with access to dashboards (integrate into monitoring metrics)
• Content creators/managers (integrate into workflow when selecting, creating, and/or preparing to share images)

Your inventory of image files should be periodically updated and reviewed to determine if further archiving or remediation is needed. This can be added as a step in existing review processes for websites, applications, courses, etc. or you can establish a review timeline. We recommend revisiting your inventory 2–3 times per year and placing recurring reminders on your calendar or in project/task management applications you use.

Tools to assist with monitoring alt text associated with images include:

• Yuja Panorama: Can scan image files and report on presence of alternative text in Canvas.
• Grackle: Can check whether images within Google Docs, Slides, or Sheets have alt text.
• Microsoft Accessibility Checker: Can check whether images within Word, PowerPoint, or Excel have alt text.

If you or your unit frequently uses the same sets of images (in slide decks, or websites, etc.), it can be helpful to keep track of the alt text associated with those images in repeated use. To do so, you can make a copy of this Image Gallery Alt Text Inventory Sheet (or make your own). This is especially useful if multiple people rely on those image sets, as you can share the inventory sheet and ensure that consistent alt text is being used across different spaces.

Image files you didn't create/don't own

• Factor in time for adding and reviewing alternative text and long text descriptions for images, especially with complex visuals.
• For images with text, aim to use visuals that have sufficient color contrast and legibility.

Image files you create/own

• Factor in time for adding alternative text and long text descriptions for images, and sharing those alongside the visuals.
• Use a color contrast checker while designing multi-colored visuals and ensure that you are not relying on color as the only indicator of meaning with graphs/charts/infographics.
• Whenever possible, share or link to the original table, chart, map, source text or data, rather than using a screenshot of a complex visual.