Writing Effective Alternate Text
Alternate text (or alt-text) for images and other graphics is incredibly important while creating/editing online content. To start, alt-text is vital for low-vision and blind internet users who browse websites using screen-readers. Screen-readers are a form of assistive technology that communicate what’s on-screen via text-to-speech, Braille, or some other form. If your graphics don’t have alt-text, the screen-readers can’t communicate the needed information to those users. In other words, because your images are presumably making a contribution to your content, low-vision and blind users are deprived of full access to the content if you fail to include alt-text or have unhelpful alt-text.
Additionally, alt-text is a significant part of search engine optimization (SEO). We know that most users don’t navigate our well-organized menus to find content. Instead, they’ll use a search engine to hop on that one page, and then move on to their next thing. Given that users very rarely search using images, adding alt-text allows search engines to recognize the content in your graphic. Particularly for graphic-heavy pages, failing to add alt-text will make your content far less likely to appear in searches.
Finally, alt-text is used whenever your graphics fail to load for any reason. Whether it’s a slow internet connection, an older device, or an expected server issue, a slow-loading page will display the alt-text even when the images themselves cannot be shown.
While writing image descriptions might seem simple, there are some key parts to keep in mind:
- Be specific: If your alt-text is less than five words, it’s probably insufficient. A good exercise is to write as if you were describing the graphic to someone with their eyes closed. So “a chicken” would be unhelpful, but “an adult rooster crowing in a barnyard” is something you can use to create a mental image.
- Keep it brief. While you’re trying to be specific, overly-wordy descriptions can be just as frustrating as vague ones. Do your best to keep your descriptions under 150 characters unless it’s a particularly complex graphic.
- Use keywords: When writing your alt-text, include words that you think users might use to search for your content. This in particular helps with SEO. If showing an image of a desk on your IT info site, try “three students standing at an information technology desk” rather than simply “three students standing at a desk”. This way, users searching for IT info will be more likely to find your page.
- Never use ‘image of’ or ‘picture of’: It may feel natural to use these when describing a graphic, but avoid them: the fact that alt-text is being used already communicates that this is a graphic. Including this is simply a waste of space, which can be detrimental when you have so few characters to work with.
Let’s put some of this into practice
Example 1: Standard images
Take a look at the image below. This is an image from an article in the 2019 edition of Vision Magazine. This article highlights the academic support resources available to students through Academic Commons. As such, we should try to create alt-text that not only describes what appears in the image, but optimizes the page for search engines.
Bad alt-text: “Students talking inside of Gelman Library”
Good alt-text: “Student employees teaching academic skills in Gelman Library”
Excellent alt-text: “Academic Commons employees directing students to support resources in Gelman Library”
Example 2: Standard images
Below is an image from the our Kiev Collection page. The image is included in a section about I. Edward Kiev’s life, rather than the general page. As such, we don’t need to include keywords about the Judaica Collection and can simply describe the image.
Bad alt-text: “Picture of a rabbi”
Good alt-text: “Rabbi I. Edward Kiev”
Excellent alt-text: “A young Rabbi I. Edward Kiev, pictured in black-and-white”
Example 3: Accent images
Very occasionally, images are simply ornamental, serving no real purpose. In these situations, best practice guidelines say the images require no alt-text. However, the newest edition of Drupal will not allow you to save a page if one of the images does not have alt-text. As a result, alt-text for these images should be as brief as possible.
Good alt-text: “Decorative website emblem”
Example 4: Photos with only text
With the exception of logos, very rarely do websites integrate images solely consisting of text. In fact, it is against WCAG guidelines to do so. However, when they do, simply make the alt-text the text displayed in the image. While it may seem to make sense to write “logo that says ‘___’”, it unnecessarily adds to your character count and can be confusing.
Bad alt-text: “CUFR logo”
Good alt-text: “Center for Undergraduate Fellowships & Research”
Example 5: Photos with some text
The below image is the homepage of the main GW website. The image is more complex than the previous examples, as it contains both text and an icon to be described. Like images containing only text, the WCAG guidelines discourage the use of these. Try to avoid these, however, when this is not possible, briefly describe the image and then the text.
Bad alt-text: “Program options”
Good alt-text: “A blue checklist and the text ‘Find a Program’”
Example 6: Icons
The below image is from our Scholarly Communications page. Here, the graphic is simply an icon and contains no text. On the page, each icon is a hyperlink and is accompanied by heading (in this case “Copyright”). Since the visual image has no meaningful contribution to the page, other than to visually represent the heading, simply make the alt-text the accompanying heading. If there is no accompanying heading and the icon is commonly accepted to refer to something specific (in this case, the copyright symbol), make that the alt-text.
Bad alt-text: “A green C surrounding by a circle”
Okay alt-text: “The copyright symbol”
Good alt-text: “Copyright”