University of Wisconsin–Madison
Line art drawing of a human head silhouette, an ear, a hand and an eye

How to write effective alt text for web images

Written in collaboration with Sandi Arendalkowski of the Center for User Experience & Digital Accessibility.

We all know that we should use alternative text to make our documents and web content more accessible, but what makes alternative text effective? This article offers 3 tips.  Before we get to them, let’s talk about what alternative text is and where you find it.

What is alternative text?

Alternative text describes in words the non-text elements of a webpage or document, such as photos, drawings or charts. You can add it as the form of an alt attribute and as captions.

The Alt attribute

The alt attribute contains a (usually) hidden description, as in HTML’s alt attribute which looks like this:

<a href="bucky-badger.jpg" alt="Bucky Badger at Camp Randall Stadium">

Don’t be intimidated by the HTML example; the page editor in WordPress, used by WiscWeb CMS, provides an easy way to add alternative text to your images, as do most modern web editing tools. Likewise, many applications in which you produce documents also support an easy way to do so, as in Microsoft Office’s Edit Alt Text feature.

Captions

A caption is a text description of an image or graphic that is visible to all users to read and is also readable via screen reader. It appears as a short description within the content of a webpage or document below the image or graphic. For example, the caption below this photo is an example of alternative text.

Students getting help at the Level 1 Help Desk
Students getting help at the Level 1 Help Desk

Be brief

Provide enough information for users to enjoy the image and act on the information it provides, the same way a vision-abled user would. Make it a sentence or less and avoid extraneous words like “photo of,” “image of,” “screenshot of.” 

Bascom Hill in fall with students walking in the grass.

Here is an example of alternative text for an image of Bascom Hill: “Bascom Hill in fall with students walking in the grass.”

Consider the context

Context alters how alt attribute text and captions should be written. For example, an image of a computer might need only “Windows PC” or “Macintosh computer” as alternative text.

2020 iMac Pro

However, if a similar image appears on a purchasing website, it’ll be helpful to include more information, such as “2020 iMac Pro” or “Dell Inspiron 3670 MT.”

Dell Inspiron 3670 MT

Or, If an image is used in a troubleshooting guide the alternative text might read “Windows blue screen error” because in this context, the computer itself isn’t the most important detail.

Windows blue screen error

Don’t be redundant

If you’ve already described the content of an image or photo in a caption, don’t repeat that description verbatim in the alt attribute; include abbreviated alternative text in the alt attribute so the users of screen readers know to what the image refers.

This article covered only a few basics. The links above and below go into a lot more detail, such as decorative images which need no alternative text at all. Please check them out.

More information:

webaim.org/techniques/alttext/