Writing Alternative Text
(This page includes general instruction about what alternative text is, and why it is crucial. See the links at the bottom of the page for practical, hands-on advice on how to create alt text in WordPress.)
When to Write Alt Text
All images on our website should have alternative text associated with them, unless they are strictly decorative images. If the image is being used to convey information, even simple/basic information, it should have alt text. However, if the image is strictly decorative, it is best to leave the alt text blank.
The most important cues on when an image is decorative or not lie in the context of the page, the content, and the reason the image is there. Is there any information in the image that is relevant or useful? Is the image only used to break up text, and does it convey information? The same image used in different contexts may require alt text in some cases, but not in others.
How to Write Alt Text
Consider that the image below is used in a campus tour, showing the St. Martin de Porres sculpture in the court. Let’s consider the scene and write some alt text together.
Example 1 ❌
“A picture of some trees”
One common mistake people make when writing alt text is to announce that they are describing a picture.
This is not helpful to a screen reader – in fact, screen readers generally announce in some way that they are about to read the text describing an image, so saying “a picture of” or “a photo of” is unnecessary.
Example 2 ❌
“Campus Tour Stop #4”
This image does not communicate anything about the number of the tour stop. Presumably, the fact that it is the fourth stop on the campus tour is already outlined in the page content. Instead, we should be describing what one would encounter when visiting stop #4.
Example 3 ✅
“A small bronze statue of St Martin de Porres overlooks a koi pond, surrounded by large blooming trees in the Rev. Thomas M. McGlynn, O.P. Sculpture Court on the Providence College campus.”
This language meets all the criteria for properly written alternative text. We start by deciding the context — since the image is used to specifically represent a place, it is not decorative. The most important or focal point of the image in this case is the statue, so we mention that first. The koi pond is also an interesting part of the image, and so should be mentioned. The trees provide some context as well, that the scene is of nature, and then the mention of the sculpture court is at the end, the least important part of the description (someone using a screen reader may stop the reading of the description once they have the information they need — so keep the most important descriptions at the beginning of the alt text). Despite the fact that the image does not itself communicate anything about the sculpture court (other statues are not visible in the image), anyone who is familiar with the space will be able to use that information to contextualize the location where the photograph was taken.
How to Leave it Blank (decorative images)
Decorative images do not convey useful information in the context of the content of the web page, or do not additionally contribute to information already on the page.
See the link below on How to Add Alternative Text in WordPress for specific instructions on how to treat decorative images in WordPress.
Text in Images
Unless it is expressly required, do not overlay text on your images. It typically will not scale well between mobile, tablet, laptop, and desktop screen sizes, and the text is not available to screen readers. However, if you absolutely must use text in an image, you are required to make sure that all information in the image is conveyed through the alt text.
Images, or captions?
If an image has a visible caption that describes it, the description should not be repeated in alt text. If the caption is not quite sufficient to meet the needs of alt text, add supplemental information in alt text. Otherwise, the caption should stand, and you should mark the image as decorative.
Resources for great alt text
- There are many good and interesting guides to writing alt text. One of the most useful is the “alt decision tree” published by the w3.org.
- Moz, an SEO group, has several good examples for what makes a good and bad alt text.
- The Penn State guide is simple, and quickly communicates the important details about writing alt text.
