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 could therefore miss out on the information they contain. To ensure the information on our webpages is equally available to all visitors, it is the content creator’s responsibility to provide an alternative, non-visual way of conveying the same information. This is done by providing “alt text” for each image. Alt text 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 to each image used on our pages.
Please note: 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 must have alt text associated with them.
How to Write Appropriate Alt Text
Images can serve a variety of functions on a webpage. Some images are purely decorative, like generic banner images or photos whose primary purpose it to add visual interest to a page. Other images and graphics convey information related to the text or illustrate concepts describe on a page. Lastly, images can be linked to other pages and, thus, serve as buttons. All images need alt text, but it is especially important that button images have properly written alt text.
An image whose primary purpose is to link to another webpage is a button or “functional” image. According to W3.org:
The text alternative for the [functional] image should convey the action that will be initiated (the purpose of the image), rather than a description of the image. For instance, as shown in examples below, the text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com homepage” rather than “Example.com logo” — Source: W3.org functional image page
Informative images add context or illustrate concepts related to the prose on the page. These images require descriptive alt text.
As an example, here is an image of pancakes that might be used to illustrate a recipe.
<img src="pancakes.png" alt="pancakes">
The alt text above is 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.
<img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar">
This alt text is a better alternative because it’s a better description of 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.
Images with Embedded Text
Images with embedded text (Infographics, charts, event posters, etc.) pose a big problem for site visitors that use a screen reader and are not accessible. Screen readers will ignore the text on the image and sometimes even the caption. In these cases it is best to include the info from the image in text form on the page. For things like infographics (see right), all the information would need to be induced on the page. But for things like events, important information like time, date, location, and a brief overview should always be included but it is always good to err on the side of caution and include the exact content on the flyer.
Some images embedded within college templates are purely decorative. For these images it is OK to supply an empty alt tag. In fact, it’s preferable because it tells screen readers the image can safely be ignored. Currently, all decorative images are handled by the templating system and designating an image as decorative is not an option for content creators. If you embed an image in a webpage, you must provide alt text.
There are many great resources on the web detailing the best practices for writing alt text. Here are a couple we recommend:
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.
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.
- Click the list-view icon
- Filter for images (optional)
- Filter for images without alt text (optional)
- Enter alt text into the form field in the Alternative Text column
- (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