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
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 doesn't always 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