How to Make Accessible Image Links (Redux)
Saturday, June 28th, 2008
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.
