Write helpful Alt Text to describe images

Alternative (Alt) Text is meant to convey the “why” of the image as it relates to the content of a document or webpage. It is read aloud to users by screen reader software, and it is indexed by search engines. It also displays on the page if the image fails to load, as in this example of a missing image.

Broken image symbol with alt text displayed below "Tourists pose for pictures, touching the foot of the John Harvard Statue".

Write Good Alt Text

  • Add alt text all non-decorative images.
  • Keep it short and descriptive, like a tweet.
  • Don’t include “image of” or “photo of”.
  • Leave alt text blank if the image is purely decorative
  • It's not necessary to add text in the Title field. 

Example of Alt Text with Various Contexts

A mostly empty stadium.

Alt-text with no context:

A mostly empty stadium.

Alt-text on a page about recent turnout for track tryouts:

Harvard Stadium with two lone runners bounding up the steps.

Alt-text on page about renovation projects:

Harvard Stadium with cracked concrete pillars.

Complex Image Types

Icons: alt text for icons should be the equivalent to the information intended by the icon, such as “Download PDF” or “Visit our Facebook Page”

Images as Links: If the image is being used to link to another page, the alt text should describe what will happen when the image is clicked (rather than what it looks like). For example, the alt text for an image of a question mark that links to a help page should be “Contact Support” rather than “question mark.”

Images with complex information: If the image is a chart, diagram, or illustration, consider how to convey the information contained in the image using both the alt-text and the adjacent page text. See an example of an accessible infographic from WebAIM.

Testing

  • Use one of the testing tools to hide images and display their alt text. Does the page make sense with the images hidden, replaced by their text alternatives?
  • Do all linked images meaningfully describe their action rather than their appearance?

Resources

✎ Technique: Describing graphs

Some people understand complex information best when it's presented visually, such as as a chart or diagram, while others find that reading the information suits them better. For people who use screen readers, a good text equivalent of the information that’s presented graphically is essential for their understanding.

For simple graphics, providing a succinct, informative text alternative is usually fine. But for complex graphics, it's not enough to provide a screen reader user with only short alternative text, such as "population graph." You also need to think about the information that the graphic conveys, such as the categories of data being shown, trends, and maximum and minimum values.

Example

 

In this example, we're going to provide a text alternative for a graph, using HTML to give an alt attribute to the graph and some visible text to provide additional information.

The alternative text for the graph (supplied through its alt attribute, which you can add when you upload a graphic using a web editor) would be too long if it were to describe everything in the graph, so it just describes the graph's purpose. And by placing this paragraph first, we make sure screen reader users can still get the information they need.

Media Sources for the Iraq War

Analysis of media coverage during the Iraq war was by no means universally objective. In fact, it's clear that coverage was overall pro-war with American news sources being slightly more pro-war than sources from outside the US. Neutral coverage came in at 26%, while a minority of sources were determined to be anti-war. Only 3% of American sources fell into that category.

Bar chart comparing percentages of Iraq war media sources in categories of pro-war anti-war and neutral

✎ Technique: Text and images of text

Some people with reading difficulties or visual impairments need to customize the display of text to make it easier to read. When text is presented as an image of text, that limits their ability to change the appearance of that text. So wherever possible, use text along with CSS to apply styling (such as color, typeface, or size).

If you use an online content editor to write content, the styling will happen automatically. If you feel that you need text that deviates from the style, formatting options provided by online content editors should allow you to update the style for that text.

Only in extreme circumstances, such as when a logo is used, should you provide an image of text rather than text. If you do this, you'll need to provide that same text as the image’s text alternative so that screen-reader users can access the text.

Examples

Bad example

In a WYSIWYG editor, it is possible to upload an image of some text (let's say, "delicious pancakes") and insert it into the page with alternative text that matches the text exactly:


<img src="/path/to/text.png" alt="delicious pancakes" />

One disadvantage here is that screen readers will, in some contexts, read the alternative text with "graphic" appended, and you might not want the user to know that the text is really an image. In addition, text that’s inside an image isn’t translatable into different languages, selectable for copy/paste, or resizable without degrading its quality.

Use CSS and web fonts

 

Write the text as text in the editor and let the publishing system apply styling.

Behind the scenes, the text will be styled using web fonts and CSS properties such as background, text-shadow and color.


.pancakes-text {
  font-family: PancakeFont, FallbackFont, sans-serif;
  color: SandyBrown;
  text-shadow: 0.02em 0.02em 0 Brown, 
                        0 0 0.5em violet;
}

Code editor

You can experiment with CSS text styling in this code editor, using the above rules as a starting point.

See the Pen CSS text styling by HUIT - Web, UX and Digital Accessibility Services (@hwpdas) on CodePen.

✎ Technique: Using diagrams to illustrate text

People differ in the way that they can (or like to) consume information, especially in educational contexts. Some people might prefer information provided in text, or video, or audio; and their accessibility needs can also influence their preferences.

But while accessibility for images often focuses on providing a text alternative for screen-reader users, we can also look at the issue from the other way around—providing a graphic alternative for text to make the underlying information or concept easier to understand. This includes for people with reading difficulties.

Example

 

Imagine that some prose has been provided to describe—in this case—the division of energy sources for Romania’s electricity production:

“When we consider energy consumption trends farther east in Europe, however, we might consider the Carpathian nation of Romania as an example. Here, we find an interesting picture, where electricity is provided by diverse energy sources, with no single energy source constituting a clear majority. According to the most recent statistics available to us, we see that hydro-electric power is the most prevalent source at slightly over one third (36%), followed closely by coal (33%), then nuclear (19%), and gas at 10%. Completing the Romanian picture, we find that other energy sources make up the remaining 2%.”

All the correct information is there, but it’s hidden among a lot of unnecessary verbosity. By providing a doughnut chart to capture the salient points, we can be more inclusive of those who learn better visually and assist the understanding of everyone: Seeing the percentages visually, as segments, makes the proportions easier to compare.

Doughnut chart with Hydro as the largest labeled segment, followed by coal, nuclear, gas and other

✎ Technique: Writing alternative text

The most appropriate alternative text for an image depends very much on the context of the image in question. You must provide information for that image that takes into account its purpose and also the surrounding text on the page. The same image might need different alternative text depending on how it's used.

Examples

Let's look at some examples of appropriate alternative text, using the same Harvard University logo in different contexts.

Stand-alone

In this basic example, we’re just using the Harvard logo to indicate that the page is associated with Harvard University. In this case, the alternative text should say something like "Harvard University logo."

But if the logo were provided as an example of logo design, we might want to go further and opt for something like "Harvard University logo, featuring black, serif text and a red shield emblem", as in this example:

Harvard University logo featuring black, serif text and a red shield emblem

Inside a link

It's a web-design convention to use a logo graphic as a link back to a site's home page. In this case, we would use alternative text that describes the action of the link. After placing the logo inside a link pointing to the home page, appropriate alternative text might be "Harvard University home page" or similar. A screen reader would identify that the image is also a link and say, "Harvard University homepage, link."

Harvard University homepage

 

Inline with text

In rare occasions, an image of text might be used inline as a substitute for text. For instance, we might want to write "Welcome to Harvard University" using the logo instead of the words "Harvard University." In this case, we should focus on writing alternative text that stands in for the visible text within the logo, without adding any extraneous information—that is, you’d want the alternative text to just say "Harvard University". We wouldn't want a screen reader announcing, "Welcome to the Harvard University logo"!

Welcome to Harvard University

Video: Adding alternative text to images in a WYSIWYG editor