For accessibility reasons, it’s important to specify alternate content for any multimedia including images, audio, video, etc. When a text alternative is provided for an image, it should serve the same purpose as the image itself and not just describe what it looks like; and similarly for other multimedia content. However, there are some cases where it’s important to know that the alternate content is replacing an image in order to give some context, even if the user can’t actually see the image (either by choice or phyisical limitation).

For example, take a recent post from Joe Clark – a well respected accessibility consultant – entitled Kills Bugs Dead. When I read this article in my feed reader, which is configured to view plain-text only (no images), this is what I read:

Truck fender has illustrations of six green-and-yellow grasshoppers in workboots and shades striking different poses, with the last two seated and stretched out on its back

After reading that, I had no clue what he was talking about. I had no idea what truck fender he was talking about, let alone having knowledge of any grasshoppers. Once I loaded the article in my browser and saw a photograph of a truck with grasshoppers as described, it suddenly became clear: the article was about the image itself and since I didn’t know there was an image, it was read out of context and didn’t make any sense.

A few weeks later, in a recent instant messaging (IM) discussion with Charl van Niekerk, we were discussing his alternate content (or lack thereof) for an image he’d used in an article entitled The guilty one at Koeberg. As in Joe Clark’s case, Charl’s article was also about the image and when I first read it in my feed reader, this is part of what I read:

South Africans might enjoy this one. 🙂

Now we know! 🙂

In this case, not only is it important to know what the image says, it’s important to know that there is an image between those two lines because it gives some context to the other content around it. Additionally, just because the user may be viewing the content without images enabled in one environment, that doesn’t mean the user can’t see the image at all and so there should be a way for the user to access it, if desired.

To summarise, these are the requirements for a solution to this problem:

• Make it clear that there is an image being discussed.
• Provide suitable alternate content for where the image is not available.
• Provide easy access to the image for the user to view.

The first issue may be easily addressed by prepending the phrase “Image:” or “Photograph of…” to the alternate content and the second point is addressed by actually providing alternate content. But the third point is a little tricker.

One way to do this is with a hyperlink, but unfortunately most images are included using the img element, which only allows plain text with no markup. In Charl’s case, he made use of the object element which has a much richer content model and allows things like hyperlinks within. His markup now looks like this (URIs modified to make the example shorter):

<object type="image/jpeg" data="homer.jpg">
  <a href=" homer.jpg" type="image/jpeg">Image: Eskom –
     Koeberg Nuclear Power Plant - Reactor Maintainance,
     Head of Maintainance: Homer J. Simpson</a>
</object>

As you can see, this now clearly addresses all three requirements. But what about the average author that uses the good old img element? One alternative is to make the image itself a hyperlink, like this:

<a href=" homer.jpg" type="image/jpeg">
  <img src="homer.jpg" alt="Image: Eskom –
     Koeberg Nuclear Power Plant - Reactor Maintainance,
     Head of Maintainance: Homer J. Simpson"></a>

Another alternative is to place a hyperlink as text after the image, like this:

<img src="homer.jpg" alt="Image: Eskom –
    Koeberg Nuclear Power Plant - Reactor Maintainance,
    Head of Maintainance: Homer J. Simpson">
<a href="homer.jpg" type="image/jpeg">(view image)</a>

There may be other, possibly more accessible, alternatives I couldn’t think of. Let me know. What do you think of these methods and how would you improve them?