Nomensa.com

You need to turn on Javascript in your browser to use this site!

Tips on combining image and text links | Nomensa

Tips on combining image and text links

Posted on

2 minutes, 25 seconds

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.

Related posts

  1. The image features a whimsical, cartoon-style drawing around an open book on a solid pink background. From the book, a burst of symbols and objects is flying out, suggesting a magical or imaginative event. These symbols include a question mark, an exclamation point, a musical note, a speech bubble with "Aa" indicating text or dialogue, a small cloud suggesting an idea or thought, and various abstract shapes and squiggles.

    Blog

    What’s new in WCAG 2.2

    Discover the latest advancements in web accessibility with WCAG 2.2. From new success criteria focusing on mobile interaction to cognitive disability support, learn how these…

We'd love to hear from you

We drive commercial value for our clients by creating experiences that engage and delight the people they touch.

Email us:
hello@nomensa.com

Call us:
+44 (0) 117 929 7333

Nomensa.com

Please update your browser to view this site!