Weblogs: Web Accessibility

Thinking About Accessibility - Equivalent Content

Tuesday, January 25, 2005

When there's an image on a page, our accessibility guidelines ask us to ensure that we provide equivalent alternatives to the image that coveys the same content. The alt attribute on the img element is one way of providing that equivalent content.

Checkpoint 1.1 of the Web Content Accessibility Guidelines requests us to:

Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content).

A real world example

The Princess Royal Trust for Carers website reaches out to people who spend a great deal of time caring for other people. The website offers advice and guidance, as well as a discussion forum for mutual support.

Their website received the RNIB See It Right accreditation in November 2003. This is one of the websites developed by Fortune Cookie who are specialists in developing RNIB accredited sites.

The right hand column of the carers website tends to hold a series of graphics and text detailing special offers, up-coming events and news worthy items. As with most charity organisations, donations are a major stream of support, and so a call-to-action presently displays to encourages that. The markup for the current call-to-action looks something like this:

<p style="margin:0px;padding:0px;">
 <a href="/support-us/donate.asp"
  class="black" target="_blank">
  <img src="../img/support-donate2.gif"
   width="125" height="125" border="0"
   alt="Donate Now -
    (opens in a new window)">
 </a>
</p>
<p style="margin:0px;padding:0px;">
 <a href="/support-us/donate.asp"
  class="black" target="_blank">
  <small>Donate Now  -
   (opens in a new window)
  </small>
 </a>
</p>

Essentially this is an image followed by a short dollop of text. The image has an alternative text which acts as an appropriate equivalent text to the image. So that's checkpoint 1.1 sorted. As an extra bonus the alternative text warns the user that clicking on the link will open a new window - that's checkpoint 10.1 met.

The practical implications

But what does it sound like in a screen reader?

Donate Now opens in a new window
Donate Now opens in a new window

Why did the screen reader read the same thing out twice? Because that is what it was told to do. Is it useful to repeat what's already been said? Considering that screen-reader users tend to be very good listeners (even at over 180 words a minute), they also have the ability to replay the last piece of content. There's no real need to say the same thing over again.

A deeper analysis of equivalent content

Checkpoint 1.1 asks us to ensure that there is equivalent content for an image. Looking at (and listening to) our example it is evident that the equivalent content is already there - the short line of text following the image is the text equivalent to the image.

Since the equivalent content already exists in the page, we don't really need to populate the alt text with another rendition of it. My suggested improvement here is to set the alt attribute to an empty string. Since the equivalent content already exists in the page, Checkpoint 1.1 is already met.

A better solution

By changing the markup to something like the following, we can reduce the markup, reduce the extraneous content, and remove another barrier for screen readers.