Guidance for Alt Text for Images on the University of Maine System Website

 

What is “alt text”?

Alt text is an alternative description for an image on your website. Visitors who rely on assistive technology such as screen readers cannot see these images. When the page is read aloud the image will be denoted as “image” in the audio. Without alt text, the visitor misses out on the information that you intended to convey with an image.

The most frequent visitor to your website that relies on alt text is likely Google and other search engines. Search engines do not see with eyes, and so they rely on the non-visual content of your web page in order to characterize it for search. Because of this, proper alt text on images is helpful both to your visitors and your website’s appearance in search (especially Google Images).


Alt text best practices

Length of alt text

Many screen readers will cut off alt text at 125 characters, so try to limit your alt text to below 100 characters when possible.

If an image is too complex to be conveyed in under 125 characters (such as an infographic or chart), editors will have to take additional steps to make all information conveyed available in an alternative text format in order to be made accessible. See article on accessibility for graphic charts and complicated images here. Please note, graphic charts and complicated images take additional time and effort to make accessible for the web. Editors should take extra consideration in determining which graphic charts and complicated images are needed, or when a text-based option may be equally effective. Please reach out to the content management team using this web form if you need assistance determining appropriate accessible approaches to your graphic charts and complicated images.

See the Office of Civil Rights (OCR) Resolution to learn more about accessibility requirements on the University of Maine System website.

Note: Spaces and punctuation count as characters.

Alt text should be descriptive and simple

Alt Text should be both descriptive and simple, and only convey pertinent information. For example, an image of a professor named Dr. Jane Smith should have alt text that reads: “Photograph of Dr. Jane Smith.” Although it may be tempting to add details such as the color of Dr. Smith’s blazer or hair color, the only pertinent information is that this is a photograph of someone specific.

Alt text for photographs, logos and graphics

Photographs, logos and graphics should each be identified as such. If the above example of Dr. Jane Smith includes the University of Maine System logo, a graphic of the State of Maine and text with her title, the alt text should read: “Photograph of Dr. Jane Smith, a graphic of the State of Maine, the University of Maine System logo and text that reads “Professor Dr. Jane Smith.””

However, do not write “Image of” or “Picture of” to begin the description of an image. Screen readers and their users already understand that this is in image. Note that words such as “photograph” or “headshot” can be used because they give information about the type of image presented.


Alt text settings in WordPress

The WordPress system will save uploaded images into your Media Library, and alt text can be associated with the image (as well as a caption, description and attribution) as it is saved in your library. If you specify your alt text at the time you upload the image, that text will save into the system in a way that is used every time you embed the image in your content. If you do not add alt text to the image when it is first uploaded, you will need to add alt text to images that are already in use on each individual page that they appear and to add it when you add the media to your page. Learn how to add add media and alt text on the Add Media page.

An important caveat: Alt text updated/added in the Media Library does not automatically update for images already in use. If you update alt text to an item already in your Media Library, you will need to update that within all individual pages or posts using the image.