Introduction
Images re-enforce the text or to provide visual interest. Images are particularly useful to break up "walls of text", giving the reader a visual and cognitive break.
Screenshots reinforce instructional content and to provide visual interest to walls of text. They capture what's on the computer screen to show users what they will see, where they should type, be aware of, or click. Adding arrows, text, highlighting, etc. to the screenshot improves the learning experience for students but is not required.
This page covers the standards for images and screenshots. If it isn't covered here, there is no standard restricting usage. The platform or departmental guides may have additional requirements.
Standards
- Images have appropriate, equivalent alternative text except when the image is decorative only
- Linked images have alternative text that describes the linked resource
- Charts and graphs have text alternatives
- Text and images of text have a contrast ratio of at least 4.5:1
- Text on the image is readable at 200% magnification
Additional Best Practice
Text on an image is:
- only for decoration (image does not convey content)
- when text alone cannot convey the information.
Image Standards
Screen readers and images
Screen readers automatically detect images (including screenshots), and notifies the user that there is an image on the page. The screen reader has no way of determining the contents of the image unless we describe the image. The description is alternative text or alt-text.
When encountering an image, the screen reader says:
Image: <contents of alt-text>
Sighted users do not see the alt text. It is not the same as mouse-over text and does not display on the page.
Alt-text should always:
-
Depend on the content and function of the screenshot or image.
-
Be accurate and succinct.
-
Include extra information that is in the screenshot but not in the text.
-
Keep the audience in mind (non-sighted or low-vision users).
Alt-text should never:
-
Be redundant by repeating the surrounding text.
-
Use "image of... graphic of..." etc., which is already plain to screen reader users.
Images have appropriate, equivalent alternative text
Alternative Text Standards
Linked Images
In a linked image, the alt-text describes the link, not the image.
Example of alt-text
Video: Self-Knowledge Tools: Enhance Your Competitive Edge
Alt-text: Video: Self-Knowledge Tools: Enhance Your Competitive Edge
Charts and graphs have text alternatives
You must provide a text version of the information charts and graphs. There are two primary ways to do this.
- Provide a link to a text alternative to the graph.
- Use the alt-text to refer users to a longer description. This is a code option. Your web developer will help with this.
Best practice is to include a link to the text alternative under the chart. This provides access to the text version to all users.
Example
Career Services Touches
Text alternative for the Career Services Touches chart.
Chart and Infographic Examples
Text and images of text have a contrast ratio of at least 4.5:1
Color Contrast Standards
Text on the image is readable at 200% magnification
