How to Add Alternative (Alt) Text to Your Images

Adding images to a webpage can be a good way to convey information and/or make a page more visually appealing. It is important to remember, however, that vision-impaired visitors may not be able to see the images and it is the content creator’s responsibility to provide an alternative, non-visual way of conveying the same information. The easiest way to do this is by providing “alt text” for each image, which is a concise description of the image that is hidden from most users but available to screen readers and other assistive technology. Luckily, our CMS makes it easy for content creators and editors to add alt text.

Please note that adding alt text to images is an important part of making webpages accessible to all visitors. And it is college policy that all images displayed on its webpages have alt text associated with them.

Alternative (ALT) Tagging Images

Also called “alt tags” and “alt descriptions,” alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user’s screen. This text helps screen-reading tools describe images to visually impaired readers.

Example:

Stack of blueberry pancakes with powdered sugar

Bad:<img src="pancakes.png" alt="pancakes">

This alt text is only not useful because it’s not very descriptive. Yes, this is an image of a stack of pancakes. But, there’s more to be said about this image.

Good: 

<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">

This alt text is a better alternative because it is far more descriptive of what’s in the image. This isn’t just a stack of “pancakes” (as the first alt text example demonstrated); it’s a stack of blueberry pancakes with a dusting of powdered sugar.

How to Add Alt Text

The best time to add alt text is when an image is first uploaded to your media library. (See this page for a refresher on using the media library.) After it has been uploaded, click the image to open its information/editing screen (pictured in the screenshot below) and type a description of the image into the field labelled “alternative text.” You may optionally add a caption and title for the image. The alt text will be saved when you click anywhere outside the alt field on the editing screen. That’s it. Once the alt text is saved, it will always be connected with the image when it is embedded in a webpage.

Best Practices When Writing Alt Text

Alt text is often read aloud to website visitors using screen-reader software. To best serve that audience, it should succinctly describe the image in a way that’s useful to someone who cannot see it. Here are a couple good resources for learning how to write helpful Alt text:

Screenshot showing image information screen with alt text field emphasized

Bulk Editing Alt Text

It is never too late to add Alt text to images without it. The easiest way to do this after the fact is by viewing the media library in “list mode” and using the bulk editing fields. The screenshot and associated key below explain how to bulk edit alt text in the media library.

  1. Click the list-view icon
  2. Filter for images (optional)
  3. Filter for images without alt text (optional)
  4. Enter alt text into the form field in the Alternative Text column
  5. (5a) Button to copy text from (5b) image title (optional). The image title will sometimes be a helpful starting point for creating alt text. The button quickly copies the text to the form field

Screenshot of media list view