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
Any image with information not in the surrounding text needs alternative text (alt-text). Whether an image needs alt-text is dependent on its purpose.
Images providing visual interest do not need alt-text. If the image does not have alt-text, the screen reader will ignore the image (in Springshare products).
If you select an image to express or reinforce a message, that image does need alt-text.
To determine if an image needs alt-text, consider these questions.
-
Is the image decorative?
-
What do you want the reader to get from this image?
If the image provides information, a message, or an emotion not expressed in the surrounding text, it needs alt-text. If the image is decorative or for visual formatting, it does not need alt-text.
It is impossible to provide guidelines for all potential image use. There are times when whether to include alt-text is a judgment call that the author must make.
Example 1:
The screen reader serves as a bridge between the student and the web page.
Alt-text Explanation
The image provides a visual representation of the metaphor in the surrounding text. It re-enforces the text. This image should have alt-text.
Alt-text: Bridge connecting Brooklyn and Manhattan.
Note that the alt-text doesn't include the word "image". The screen reader knows this is an image from the HTML code. It is redundant to include "image" in the alt-text.
Example 2:
In 2019, Ward Ulmer was named the President of Walden University.
Alt-Text Explanation
Do not assume that someone does not have a mental image of a person because they cannot see them clearly. Always include alt-text when providing a picture of an individual.
Alt-text: Ward Ulmer
Example 3:
"The Star-Spangled Banner" is the national anthem of the United States. The lyrics come from "Defence of Fort M'Henry", a poem written in 1814 by the 35-year-old lawyer and amateur poet Francis Scott Key after witnessing the bombardment of Fort McHenry by British ships of the Royal Navy in the Chesapeake Bay during the Battle of Fort McHenry in the War of 1812.*
Alt-text Explanation
In this example, flag image is serving a decorative purpose. It does not need alt-text.
"The Star-Spangled Banner" is the national anthem of the United States. The lyrics come from "Defence of Fort M'Henry", a poem written in 1814 by the 35-year-old lawyer and amateur poet Francis Scott Key after witnessing the bombardment of Fort McHenry by British ships of the Royal Navy in the Chesapeake Bay during the Battle of Fort McHenry in the War of 1812.*
Alt-text Example
As opposed to the example above, the image is intended to provoke a patriotic response in the viewer. The image is of a war memorial based on a famous historic photograph. This image needs alt-text.
Alt-text: US Marine Corp War Memorial in Washington, DC
*Text: Wikipedia. (n.d.). The Star-Spangled Banner. Retrieved from http://en.wikipedia.org/wiki/The_Star-Spangled_Banner
Photograph: Rowan, A.R. (Photographer). (2013, June 4). The Marine Corps War Memorial in Arlington, Va. [digital image]. Retrieved from http://tinyurl.com/k5raxf9
As with images, whether a screenshot needs alt-text depends on the purpose of the screenshot. If the screenshot provides information not included in the text, it must have alt-text. Determining if a screenshot needs alt-text is easier than with an image.
Consider the following examples.
Reinforcing text with a screenshot
Do not use alt-text to describe a screenshot that repeats the surrounding text.
No alt-text is needed. This screenshot example provides a visual depiction of nearby text.
Additional information
Do use alt-text to describe content unique to the screenshot.
This screenshot includes information that is not part of the surrounding text.
Bad Alt-text: Search boxes with "organization development" typed into the first box. Note: Use quote marks around words to search as a phrase.
The first part of this alt-text is repeating the surrounding text, which is not needed here. This is equal to writing two sentences that say the same thing.
Bad Alt-text: Screenshot with note: Use quote marks around words to search as a phrase.
It isn't necessary to tell the screen reader that this is a screenshot. The screen reader would read this as "Image: Screenshot with note: Use quote marks around words to search as a phrase."
Good Alt-text: Note: Use quote marks around words to search as a phrase.
This provides the screen reader with all the important information included in the screenshot. It is unnecessary to say anything more.
Additional instructional information, the abstract version:
Do use the alt-text carefully to describe abstract information.
This screenshot provides more information, but in a way that is more difficult to describe.
Bad Alt-text: Subjects: Student Attitudes (which is highlighted); Risk; Measures (Individuals); Mulitvariate Analysis; Internet; Communication Skills; Mass Media Use (which is highlighted); ...
This is confusing even when you can see the screenshot. It makes little sense as a description. The alt-text does not provide a clear explanation of what is highlighted or why.
Good Alt-text: A list of several subject terms, with the following terms highlighted: Student Attitudes, Mass Media Use, and Mass Media Effects.
This describes the information in the screenshot (a list of subject terms) and that some of the terms are highlighted.
Images included in a button need alt-text depending on context.
If the image is decorative, no alt-text is needed.
If the image provides additional information, alt-text is needed.
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
