Tips on combining image and text links

Tips on combining image and text links that link to the same resource, a requirement stated in the Web Content Accessibility guidelines.

Transcript:

Hi, I’m Kate from Nomensa, and today I’ll be showing you some tips on combining image and text links that link to the same resource, which is a requirement stated in the Web Content Accessibility guidelines.

It’s common to come across image links with link text underneath them. However, when there are multiple links to the same resource, this creates unnecessary duplication, and means that when keyboard users tab through the page, they have to tab through multiple links for the same resource in order to move through the section. To get to the last item, we have to tab through 14 links for just 7 resources. So when there is a whole page full of links marked up like this, having to tab multiple times to get past one resource can become quite tedious.

We can fix this by wrapping the image element within the same anchor tag as the text link, and giving it a null alt text. The alt attribute should not have a value in this case in order to prevent duplication of text. Now we only need to tab once to get past the whole resource. But what about when you want to have an image link, followed by a heading, which is also a link, a description, and then another link at the end of the description, like in this example?

This is also a common scenario, but as you can see, we are now required to tab 34 times to get to the last panel. Using the aforementioned solution would not solve our problem in this case. This kind of approach of having multiple links in a panel is normally used in order to increase the hit area, so our best approach to fix this would be to make the whole area clickable using JavaScript.

In this case we have written a simple JQuery function to make the container clickable. The function retrieves the href value in the container’s anchor element and takes the user to the resource when it is clicked. We also used CSS to change the cursor to a pointer to ensure sighted visitors to the site know they can click on the area. This means we can remove the link from the image and the link in the description, and have left only the heading marked up as a link in the HTML, but we still have a large hit area.

Lastly, it is worth noting that, while HTML5 specifications allow for block-level links, that is, block elements wrapped inside anchor elements, due to the varied support for this on screen readers, this approach is not recommended at this time for accessibility. (For more information about this requirement, please visit the dedicated WCAG page, which can be found here.