How to Make Accessible Image Links (Redux)
The accessibility of image content on a website is a crucial part of best practice web design. When we think of accessibility the first thought in our head would generally be the translation of visual content into non-visual content. WCAG 1.0 Checkpoint 1.1 affirms that we need to provide a text equivalent for all non-text content (via alt or longdesc attributes). Similarly, the WCAG 2.0 Candidate Recommendation’s Success Criteria 1.1.1 implores that, bar several exceptions, all non-text content that is presented to the user has a text alternative that serves the equivalent purpose. Without a doubt, the accessiblity of non-visual content is a primary concern for website accessibility.
Two very good articles on WebAIM, the first Alt text and linked images and Appropriate Use of Alternative Text, provide a strong basis for creating accessible image links. Basically, whenever you use an image as the only content within a link you need to provide a text equivalent of the function of the link. The alt attribute should be used to show the function of the link (rather than a description of the image).
Like many people, it appears that I had made some wrong assumptions in the past about the correct way to mark up images as links. In my old scenario I was marking up a title on the surrounding link element while providing alternate text to describe the image. The reality is that screen readers ignore that title attribute on the link and, as Jared points out in one comment the title is only intended to be supplementary information anyway. So, naturally, using the link’s title isn’t enough.
On the other hand the last thing you should be doing is marking up every image with “Click Here” or “Links to…”. A reasonable approach might also be to write something like “Ellen, lithograph and etching by Linden Langdon (proceed to LindenLangdon.com)”.
The key to all of this is in the context of the situation. While alternate text can describe an image, well so can the surrounding page content! There’s a very good argument for providing empty alt attributes when the surrounding content makes it clear what the image is, too.
There are a lot of caveats, fringe cases and judgement calls involved in providing high quality alternate text. I know that in the last few months I’ve dramatically revisited my approach based on the way real world screen readers process the link’s title attribute, for example. Nobody is going to come up with a cut-and-dried scenario proof perfect approach to alternate text on images. Its fine that we’d all write these things in slightly different ways. But its very important that we provide them for images, and its important that on websites we incorporate them as consistently as possible.
Ten gazillion people won’t do it right but that’s also no reason to go down the HTML 5 route and suggest we make them bloody optional (read The Solution is a HTML 5 Apathetic Doctype to measure my attitude on that one). Alternate text is of benefit to people as it is when used correctly. As web authors its our responsibility to lift our game not the specifications job to dumb down. OK its time for a crumpet and a cup of tea. Good luck with it.
Update: 29 June, 2008
In the comments of Bruce Lawson’s recent post Is alt text necessary for photo sharing sites? I posed the question: what if an image could have relevant content meaning BUT still be a link. Or, what if an image of an art work had a valid alt you could use but it also linked to another website? Bruce’s recommendation was to use the destination because a screenreader will prefix it with “link”, so the obvious question to answer is “link to where?”
I expect that the example from earlier in this article - “Ellen, lithograph and etching by Linden Langdon (proceed to LindenLangdon.com)” - would be effective as well.
Update: 30 June, 2008
Further reading: The Alt and Accessibility by Mike Cherim
June 30th, 2008 at 6:19 pm
[...] « How to Make Accessible Image Links (Redux) [...]