Skip to Main Content

Accessibility: Images

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.

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

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

Video: Self-Knowledge Tools

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. 

  1. Provide a link to a text alternative to the graph.
  2. 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

Text on an image must have sufficient contrast to the image background.  This applies to text added to the image or text overlaid on the image.
 

Text on the image is readable at 200% magnification

To support those who magnify web pages, text on an image must be clear and readable at 200% magnification.