Accessible Alternate Content

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>

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?

5 thoughts on “Accessible Alternate Content

  1. Shouldn’t the UAs be giving the option to display a link to the image? An image already has a URL attached and it should be easy to use it.

    And also the UA (browser, feedreader,…) could clearly state the type of content not being displayed.

    It seems to me UAs could make better use of the contents of the IMG tag, let alone the OBJECT tag and its content.

    And what about the longdesc attribute for the IMG element?

    Am I missing the point?

  2. That’s always a possibility for the UA to do, but we have to work with what we’ve got now, not what we might have one day.

  3. Your device will tell you it’s an image. If your feedreader doesn’t, well, get a new feedreader. It is redundant, in most cases, to write “Photo shows” in an alt text.

    I think your discussion has little, if any, merit.

  4. Joe, I agree that in many cases this isn’t necessary and I wasn’t suggesting that it be done for every image. But if you take a look at your article I talked about in a browser with images and stylesheets disabled (just like in a text-only browser) there is little to immediately indicate that there is an image available. I made a test case using both img and object using your alt text and no link to the image, and these were the results:

    In Firefox (for both img and object), it is possible to select “View Image” from the context menu, but you’d have to know to look there.

    In Opera, for img, there is a border drawn around the text which does suggest there is an image available and one can select “Open Image” from the context menu. But for object, there is nothing like that and I could not find a way to view it at all.

    In Lynx, there is nothing for either img or object to indicate there is an image and no way that I could find to access it (although, there may be a way I don’t know about).

    In all cases where a hyperlink is provided directly to the image, the user is able to easily access the image and either view it in the browser or save to disk for viewing in another application.

    Adding some text to indicate that the link is to an image of some sort also helps to indicate the type of file being linked to. Just like it is common practice to include the text “(PDF)” (or equivalent) when linking to a PDF file, writing “image” or “photo” or something else serves the same purpose. This is certainly not necessary in all cases, but it might be useful for some.

    The issue is about discoverability and there is nothing wrong with — in fact there are advantages gained from — the author taking some initiative to increase the discoverability. That, in turn, only improves accessibility, so I don’t see what your major issue with this is, nor why you feel my article has little merit.

  5. I think you’re ultimately highlighting limitations of feed creation software and feed readers. A good XML feed of an (X)HTML page should sub in the alternative content for an image; but at the moment most feeds lose that info.

    In future feeds might end up enclosing images, css etc so that readers can get the author’s original design/full content; but right now they’re pretty seriously bare-bones.

    I think all user agents should do a better job of handling alternate content. In fact screen readers definitely need a kick in the butt on many levels – I’m thinking of the screenshot of a JAWS preference panel that someone put up in a slide at WE05… what a nightmare interface!

    Still… I’m not quite sure how to approach alt text for some images. Like Joe’s photo, which is tough to explain. Artistic subject matter is a curly one because different viewers will describe totally different things when talking about the same subject.

Comments are closed.