How is alt text an important tool for accessibility?

  • Alternative text provides meaning for all non-decorative images for people who are blind or low vision.
  • Alt text is useful for anyone who uses a screenreader, as they allow the user to understand the content of a media attachment.
  • If users have low bandwidth, alt text will also appear when images do not load on the page.

Alternative Text descriptions (also known as alt text) should be provided for all non-decorative images. Alt text is a written description of an image that is embedded in the image and read by screen readers.

The alt text of an image should:

  • Succinctly describe the information provided by the image (a few words or 1-2 sentences at most)
  • Not be redundant; you not need to use the words “image” or “graphic,” as this is redundant because most screen readers announce “graphic of…” when reading alt text
  • Objective and not interpretive
  • Follow the same writing style and terminology as surrounding text
  • Describe charts and graphs, and link to full data tables from the text

To add alt text to an image you are uploading:

  1. Click on the “Add Media” button above the chapter/matter you are working on.
  2. In the “Upload Files” tab, choose the image you would like to upload.
  3. Look for the “Alt Text” field on the righthand side of the page to add alt text to the image.
  4. Click the “Insert into Chapter” button.

To add alt text to an already uploaded image:

  1. Click on the image in the chapter you would like to edit.
  2. Click on the pencil icon (this is the “Edit” button).
  3. The image details pop-up will appear with the alt text field at the top.
  4. Click “Update” to save.
Picture of a grey long haired cat with a white chest and white paws. Cat is lying on a white bed with paws outstretched, facing the camera.
A very cute cat.

To check your alt text without using a screen reader:

  1. Open your chapter in “Preview” and right click the image.
  2. Click on “Inspect.” A pane displaying HTML will appear.
  3. The alt text will appear next to the tag “alt=”.
A screenshot of a computer screen that shows an image of a grey cat on a webpage. On the righthand side of the screen is an HTML pane that displays the alt text of the image.
Checking for alt text in your chapter.

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

UW Libraries Pressbooks Accessibility Guide Copyright © by Lauren Ray; Sena Crow; and Melanie Smith is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book

Feedback/Errata

Comments are closed.