Tips on combining image and text links
- Kate Bradbury
Tips on combining image and text links that link to the same resource, a requirement stated in the Web Content Accessibility guidelines.
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?
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: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140311/H2)
Let's work together
We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.