Image Playbook

Before sharing or posting an image, verify the image follows UTMB guidelines:

The image doesn't contain text

(screen readers can't read it and it often won't resize correctly)

The file type is correct for the function

• jpg, jpeg - photographs and other images
• .png - when a transparent background is needed
  

The file is under 1MB

Image file name is clear

• Meaningful and relate to the content
• Sentence case or Title Case (avoid all caps except for acronyms)
  
• Single between the words
• No special characters, especially underscores, ampersand,s and quotes)
• Avoid dates and words like final, copy
  

The image has alt text

Summary: images must have associated text describing the content of the image also called alt text. Some decorative images do not require a description.

Writing a good image description

Describe the image like you would to a person who wasn't in the room with you, so they know what is happening in the image.

• Write in sentence case.
• Include just the description, not introductory text like "An image of" or "Image of" as screen readers will say something like, "Image: Image of a red train going through a dark tunnel."
• Indicating the image is a graph, photo, or screenshot is okay. It will often sound like Image: Graph showing the number increase in sales" or "Image: Photograph of Mount Hood at sunset"
• Include any text in the image (for example legacy images that haven't been updated)
• If the image is complex or needs more of a description, add a detailed caption to the image.

Basic verification

• Run the application's accessibility checker.  If the application doesn't have an accessibility checker (or wizard, etc.) Manually verify that each image has a description.
• Verify images
  • have alternative (alt) text
  • the image doesn't contain words as part of the image
  • doesn't use the file name as the alt text

See also:

Writing effective alt text

Add alt text to images in:

• Outlook
• Word
• PowerPoint
• Excel
• Office graphs, shapes, pictures, SmartArt

Relates to: WCAG 1.1.1 Non-text Content