Image Playbook

Overview

Web page layout and components are important in creating and accessible experience for all users. Ensuring these considerations are used in page design phase will reduce fix time and help create the most accessible experience for all users.

Review quarterly

Just like security, digital accessibility requirements will evolve as software and technology develop.

Image plays: content under continual refinement

Formatting images

Image format

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

Images should have alternate text added.

Describing images

Images have alternative 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:

Relates to: WCAG 1.1.1 Non-text Content