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?