Writing Alternative Text

Once you’ve read the information below, find out how to add 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.

How to Write Alt Text

The image below is the masthead image on this site’s homepage. Let us 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

“Home page header image”

It is also important to consider the photo separate from the context of the page in which it appears. You should simply describe the relevant parts of the photo.

Example 3

“On the PC Campus, a statue of St Martin de Porres overlooks a Koi pond, with spring trees and flowers in bloom.”

This language might be excessively florid, but it meets all the criteria for properly written alternative text.

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.
•  I’ve been recommending the Penn State guide for some time as it is simple and quickly communicates the important details about writing alt text. 

Images with Text

It’s always better not to put text in your images. The text won’t scale properly to all screen sizes, and it will never be as accessible as plain markup.

However, if you absolutely must, you must make sure that all information in the image is conveyed through the alt text

Guides & Tutorials

Looking for specific information about how to create accessible content? We’ve created a few guides below.