Describe the content of images

Pictures, diagrams, maps, charts, and icons can be effective ways to communicate information. Some people can’t see images, including people who use screen reader software. Providing text alternatives helps people who can’t see images access the information provided.

It's important not to over-describe images, such as if you were to use both a text alternative (through the alt attribute) and a title (through the title attribute). Redundant text alternatives make for an overly verbose user experience. Also, if some images aren’t relevant to the content, make these images hidden to screen reader users by leaving alt and title attributes blank.

Provide text alternative for images:

  • Provide a short description for content images. A short phrase describing the image will make its purpose known to screen reader users.
  • Don’t use the title attribute for images. There is no real need to provide a title as well as alternative text.
  • Don't describe decorative images. For images that don’t contribute to the content and functionality of the page, hide them from screen reader users. With OpenScholar you can do this by not providing information in the Alternative text and Title inputs when loading an image.
  • Describe the action for images that are inside a link. And when you’re using images as controls or links to other pages, the text alternative should describe the action (such as “Print page”) rather than the image (“Printer icon”).
  • Look to other means to describe complex images. You can provide a full description of a complex image in a variety of ways—such as in the text of the page, as an image caption, as a data table, or on a separate page linked from the image.

Follow these best practices for text alternatives:

  • If the photo is being used to show something generally, the description should name the person, place, or thing: “Photo of Harvard Yard.” 
  • If the photograph is being used to provide detailed information, the description should be more specific: “Photo of the Old Yard section of Harvard Yard showing the bronze statue of John Harvard in front of University Hall.”
  • If the image is being used to link to another page, its short description should describe the link’s destination, not the image. For example, an image of a question mark that serves as a link to a help page should be described as “help”—not “question mark.”
  • If the image is informational, such as a chart, diagram, or illustration, its short description might be “Diagram of John Harvard statue.” Its long description should include the details conveyed visually, such as dimensions and materials used. Note that a long description should be provided for images that are the sole source of that information, but you don’t need to describe a chart if the same data were also displayed on the page in a data table.
  • If the image is a map, its short description might be “Map showing location of John Harvard statue.” If the map is intended to provide directions to the statue, then its long description should provide step-by-step text directions.
  • For icons, their short descriptions should be the equivalent to the information provided by the icon, such as “PDF document” for a PDF icon.
  • For images that require a long description, consider using a figure caption to display the long description. That way, the descriptive information is available to all users.

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.

✎ 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