Alternative Text for Images

Content

Introduction

When defining the alt attribute (alt text) on an image, context matters the most. Alternative text provides screen reader software users with access to all of the non-text information. This is why context matters the most, as you want to think about what information is the most important, the more pertinent, that you are trying to get across with an image.

The most popular screen reader used by the OSU community, as well as the screen reader provided in computer labs, is JAWS. Screen readers linearize content on a website by reading through the HTML code, so that individuals using the software can interact with the website. Most screen readers work in the whole computing environment, but for our purposes how they interact with websites is the most important in this section.

Alt text is always required, how it is written can vary depending on the type of image. Most screen reader software announces the presence of an image by appending a word such as "graphic" to the alt text, so using words such as "photo" "graphic" and "image" should be avoided in the alt text, unless it helps convey further meaning important for a user to know.

Listen to the first example image below without alt text in JAWS or view the Transcript.

The following examples show multiple kinds of images, and how alt text should be used in each circumstance.

WCAG 2.0 States

1.1.1. Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for [some exceptions]. (Level A)

Standard Image

If the image is either a photograph, drawing or painting, the alt text needs to describe the image in as short of a phrase as possible. If the image requires a lengthier description, it is best practice to describe the image in the content and provide a short alt text, although the attribute longdesc can be used as well.

For example, if the image below of former Vice Provost for Student Affairs Larry Roper was being used in something like an article about OSU or an event or program announcement, the alt text should just announce what the image is.

Image
Vice Provost for Student Affairs Larry Roper

HTML: <img src="/images/larryroper.jpg" alt="Vice Provost for Student Affairs Larry Roper" />

Listen to this alt text in JAWS or view the Transcript.

As another example, the image below shows alt text being used to describe an image of campus.

Aerial view of the Memorial Union

HTML: <img src="/images/muaerial1234.png" alt="Aerial view of the Memorial Union" />

Listen to this alt text in JAWS or view the Transcript.

Image with Text

Images that contain text should generally be coded to just include that text as the alt text.

For example, the alt text of this non-linked image should just be the words in the image.

Daisy Farm Project

HTML: <img src="/images/daisylogofinal_sm.png" alt="Daisy Farm Project" />

Listen to this alt text in JAWS or view the Transcript.

Linked Image

Images that serve as links should be described and what clicking the link would do should be included as well. Images of just text that area links should just have alt text using those words. In most cases, describing what clicking will do is probably adequate, but again, context is most important and it will be a case by case basis.

For example, the OSU tag image below is used at the top of every OSU website as a link back to the homepage for the university. In this case, the alt text is "Oregon State University." Screen readers announce the presence of a link, so using words like "link" "visit" or "website" are not necessary. Also, using the word "tag" or "logo" would probably be not necessary here as well, as it doesn't add anything to the meaning.

Oregon State University

HTML: <a href="http://oregonstate.edu"><img src="/images/osu-logo-2017-400x160.jpg"alt="Oregon State University" /></a>

Listen to this alt text in JAWS or view the Transcript.

Decorative Image

Many images are used on websites only for visual interest, they aren't meant to convey any meaning or important information. In this case, it is best to use what is called NULL alt text or empty alt text.

NULL alt text is just <alt=""> two quotation marks after the alt=. NOTE that the alt attribute is still present, that is always important. When a screen reader comes across null alt text, it will completely skip over the image, not even announcing its presence. Someone who is fully sighted would easily skip right over a decorative image, null alt text allows someone using a screen reader to do the same thing.

Another possible option for those with coding experience is to code the image as a background image. By putting the image in the style sheet (CSS) you remove it from the HTML and from the view of screen reader software. This is a simple solution, especially if the same image is used often.

Adding null alt text in a content management system (CMS) like Drupal is possible, but not as simple as leaving the alt text box empty. Learn more in the Drupal section below.

For example, the image below serves only as decoration for a website. Giving this image alt text would only add to the content that someone has to navigate through to find useful info relevant to their visit. (The example image has been given alt text on this page, because it does serve a purpose here.)

Spacer Example

HTML: <img src="/images/spacer.png" alt="" />

Since a screen reader skips over NULL alt text, there is no audio example

Complex Images

When the image is complex, including things such as charts, data, statistics, etc. where a short description is not possible, there are multiple options.

The absolute best solution, that would benefit all visitors, would be to include a through description of the complex image in the content of the page, immediately before or after the image. This way, everyone would be able to get the full meaning of the chart. If you don't want to add more content to your page, another preferred alternative would be to create another web page with just a description of the complex image and link to it near the image.

The traditional way to provide this extra context has been through an attribute called a long description. It is not as widely supported by browsers and are rarely implemented correctly. The longdesc attribute serves as a link within the image element to another page with just the description of the image on it. The longdesc only provides access to a link through a screen reader, so only someone using a screen reader would know more detail exists.

HTML: <img src="/images/complexchart.png" alt="Chart showing the trend of total OSU enrollment to new students at OSU from 2007 to 2011" longdesc="chartdescription.html" />

The longdesc linked file or the page content should then contain a description similar to the following:

  • The chart below shows trends from 2007 to 2011 comparing the total number of OSU enrolled students to the number of new students each academic year.
  • During the 2007-2008 year there were 19753 students, of which, 5420 were new students.
  • During the 2008-2009 year there were 20320 students, of which, 5675 were new students.
  • During the 2009-2010 year there were 21969 students, of which, 6461 were new students.
  • During the 2010-2011 year there were 23761 students, of which, 6879 were new students.

Chart showing the trend of total OSU enrollment to new students at OSU from 2007 to 2011

Drupal

In Drupal, alt text is added through the Alt Text field when inserting an image.

Alt Text goes in the Alt Text field

To add NULL alt text in Drupal, you have to edit the page in "PHP Code" input format. This is found directly under the Body section when you are viewing a page for editing. In the PHP Code you have to work in the actual code, find the image looking for the <img> element, located the alt text within that element <img src="" alt="" />, and make sure the correct coding is used - an alt attribute to match the one in the previous sentence. Save your page and you will have images with null alt text. If you ever change the input format, you'll have to do this all over again.

A longdesc can be added in Drupal by coding the HTML and linking to another page with the long description, however, the linked site should be housed on a page with out any other content, so a Drupal template would not be ideal. This is one reason why adding descriptions in the page content would always be preferred.

Resources & Tools