One of the most basic techniques of web accessibility is adding alternative texts to images. It is possibly the single biggest thing you can do to make your site more accessible. In fact, it is the very first item listed in the WCAG 2.0 guidelines:

WCAG 2.0 Guideline 1.1.1 - "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."  

The most common way of meeting this guideline is adding an alt attribute to the image tag:

<img src=”lollipop.jpg” alt=”Rainbow-colored spiral lollipop”>

First, let’s look at why this is needed. Why would a person not be able to see images?

  1. Because of a visual disability. They may be blind or have some sort of visual impairment. 
  2. There is a bug on the page (the image location was moved but the image source path was not updated) or a server glitch that prevents the image from loading in the browser.
  3. A person is browsing on a low bandwidth connection or device and has images turned off to speed up page loads. Yes, people do this.  Not everyone in America or other parts of the world have access to a high speed, unlimited data connection. And have you ever tried to access a website on a Kindle Paperwhite with the 3G connection?  Painful. Turn images off to save your sanity.
  4. The person that is visiting your site is actually a computer... like Google when it indexes the pages on your site. Google can’t see images. But Google can parse descriptions of images and they can help boost your search rankings.
  5. Now that we have compelling reasons to add alt text, we can just slap a short description of the image in the alt attribute and we’re done, right? Clearly not, given the length of this blog post. It’s just not quite that simple. There are many things that affect what that alt text should be. First, let’s look at some basic best practices.

General Best Practices for Describing Images

  1. Every image should have an alt attribute, even if it’s null (alt=””).
  2. Do not use phrases like “image of…”, “picture of…”, “graphic of…”, etc. The screen reader will tell the user that it’s an image.  
  3. Be clear and brief.
  4. Don’t use CSS to display images unless they are purely decorative. Alt attributes cannot be added to CSS images.
  5. Alt texts should generally be no longer than a tweet in length. This is not a hard and fast rule but a generally accepted good practice.

 

Let’s look at some scenarios:

Image scenarios

Eye candy

Some images are purely decorative.  They could be completely removed from the page without the content of the page being affected. The megaphone in the block below is purely decorative.  

Example of eye candy image

In its original context, if it were added with an img tag (as opposed to an icon font as seen at the bottom of this page), the alt text should be null to let the screen reader know that it can be safely ignored.  

<img src=”megaphone.gif” alt=””>

Even better, the megaphone image could be added via CSS as a background image or an icon font and completely removed from the content flow of the page.  If used as an icon font, be sure that the icon is wrapped in its own element so that it can be hidden with the aria-hidden attribute set to true.  Otherwise, VoiceOver will read the corresponding character used for the icon.  See Eric Eggert’s “A better way to use icon fonts” and “The best way to use icon fonts." 

Complex Images

On the one end of the spectrum are images that are purely decorative.  On the other end are images that are content in and of themselves, such as graphs and charts.  These images can convey a massive amount of content visually and may require a lengthy description. There are many ways to accomplish this:

  1. If the lengthy description is part of the content surrounding the image, the alt attribute could point the user to the surrounding text.
  2. Provide a link to a page with a description immediately next to the image.
  3. Use a longdesc attribute to point the user to the page with the full description.  The drawback to this is that longdesc is not currently supported by VoiceOver.  However, with longdesc being recently added into the HTML5 specification, support will hopefully be added. See a good example of the longdesc attribute that points to a properly marked up data table that provides equivalent content for the image.
  4. Use aria-describedby to reference the id of an on-page element that contains the long description. This element could be visible or hidden. Jonathan Snook has a great article on how to properly hide content.
  5. Use the jQuery Accessible Longdesc plugin. A link to the longdesc is available to screen readers but visibly hidden on the page.

 

There are a number of other techniques for describing complex images offered by the W3C as well.  

Images containing text

Putting text in images is discouraged. But sometimes it’s unavoidable. In those situations, the text in the image needs to be conveyed to a user who can’t see the image. Usually copying the text content of the image word-for-word into the alt attribute is best. 

Department of Redundancy Department

There are lots of opportunities for redundant alt text.  

  • When an image has a caption, it’s tempting to put the same text in the caption and the alt attribute.  
  • If a link has an image next to it that conveys the same information, the image is redundant. For example, a shopping cart icon next to a link that says “Cart”.

 

There are many more cases you’ll run into where an alt text would be redundant.  In these cases, leave the alt attribute blank. 

Functional images

If an image has an action associated with it, it should convey the function of the image instead of a description of the image. For instance, Print is a popular Drupal module that provides print, email, and pdf functionalities for Drupal web pages. It puts icons on a page:

Examples of function images

These icons’ alt texts shouldn’t be “Illustration of a printer”, “Envelope icon”, and “PDF logo”.  They should reflect the function of the image such as “Print this page”, “Send page as email”, and “Create PDF version of page”. 

Consider the context

Informational images are probably the most difficult to determine an appropriate alt text because they need to take their context into account.  Take this image for example:

Example image

What are some possible alternative texts for this image?

  • Adorable kitten
  • Adorable kitten tired from his playing with ball of string
  • Placeholder image
  • Every time you hack Drupal core a kitten dies
  • Example image

 

Any of these examples could be appropriate in the right context.  In the context of this blog post, “Example image” is most appropriate.

Summary

As you can see, adding alt text to images can become quite complex depending on many factors.  This is a good example of why manual accessibility testing is so important.  Automated checkers can test for whether alt text exists or not along with a few best practices but there is no way for an automated checker to definitively determine whether the image has appropriate alternative text. That requires human judgment.  And now you are armed with the knowledge to make those judgment calls, so, go forth and accessify!

Additional references
A nice little Decision Tree to determine the appropriate alt text for your image.
Many examples of appropriate alternative text by the W3C.

Tags
Drupal
Accessibility