Accessibility - Handling repeated adjacent links

Henny Swan - Published: 28th Mar 2011 08.14 GMT

If ever there was a case of 'too much accessibility' duplicated links on one page to another is a strong contender. A typical example of this being on a news website where a single news item may have a linked image, heading and (as if that's not enough) a 'Read more' link.

Screenshot

The code for just one news item shown in the image below is as follows:

<a href="/sol/homepage/news/3469297/Dewani-must-go-to-Priory-hospital.html"/>
<img src="http://img.thesun.co.uk/multimedia/archive/01272/dewani-280_1272321f.jpg" alt="Conditions Shrien Dewani must stay at The Priory" /></a>
<h2><a href="/sol/homepage/news/3469297/Dewani-must-go-to-Priory-hospital.html"/>Dewani 'must go to Priory hospital'</a>
<a href="/sol/homepage/news/3469297/Dewani-must-go-to-Priory-hospital.html" class="mystery-meat-link"/>
<p class="small">HUSBAND accused of arranging the murder of his bride Anni on honeymoon is told to live at hospital</p>
<span class="media-group cf">
<span class="read-more"> Read More </span>

The Problem

You'd be forgiven for thinking that duplicating the links in this way was a good thing, and you'd be right in part. Children, people with poor motor skills and some mobile users may gravitate towards an image when navigating links while others prefer the link text. It scratches the usability itch to provide multiple modes of access to suit a variety of needs which is good but at what cost?

Voice input users, screen reader users non touch screen mobile users and other keyboard only users typically have to tab through a page, or a list of navigational elements such as links, to access content. This can mean a page that has 4 news stories (like the one above) is suddenly quadrupled from 4 to 16 links. This is clutter and on complex pages extremely time consuming to navigate. Given that most websites want users to access content fast this can be a nightmare especially if there is a timeout on the site.

Labelling the images and links differently also causes confusion. The ALT text on the image may be different to the text link which can lead to the screen reader users thinking these are links to two different pages. When poorly implemented title text is added to the equation on the link you can, in some extreme cases, hear the ALT text, title text and link text all of which are different. I think the technical term for this is: a mess.

back to top

The solution

In short you want to retain the multiple means to access a link while minimising tabbing and noise. By combining the image and the text link within the same ahref you manage to retain the large clickable area and the pretence of providing multiple ways to access content while cutting out the repetition. The code would look something like this:

<a href="services.html">
<img src="icon.gif" alt="" />
Services
</a>


A basic approach for bundling an image and a link together are to give the image null alt text (as all images must have an alt attribute) and make the link descriptive of the target page.

It's up to you however if you want to give the image descriptive alt text. It may be that the image is content in itself as well as having a functional purpose. The example below is a good case in point as it shows the portfolio page of web design agency Copious. The linked image is a screenshot of the home page or website they are showcasing grouped together with a heading introducing the link.

Screenshot

Illustration 2: Image and text links grouped together and given focus.

The code for the Bioupdate Foundation link is as follows:

<a href="http://www.bioup.com" title="Visit the Bioupdate Foundation website">
<img alt="Screengrab of the Bioupdate Foundation homepage" height="155" src="img/projects/thumbBioup.gif" width="188" />
Bioupdate Foundation
</a>
<p class="tags">Website for education and training events in biotechnology</p>

Here the site owners have done four things:

• Placed the image and link in one a href
• Given it a blue border rollover effect which also works with keyboard focus (a:hover, a:focus, a:active)
• Given the image descriptive alt text "Screengrab of the Bioupdate Foundation homepage"
• Provided TITLE text on the image "Visit the Bioupdate Foundation website"

back to top

This is a slightly more sophisticated solution which adds the kind of fine tuning that we should all be looking for in our web pages. It's an accessible solution that is also usable, providing additional information should the user want.

The blue border is an essential signpost to let sighted keyboard (and mobile) users know where they are on the page. Wherever possible try and enable rather than disable this. In other words avoid a { outline:0;} and try and keep focus styles the same as hover styles.

The alt text describes what the image is – as screen shot of the homepage. This gives the non sighted user an idea of what the portfolio page looks as well as a useful prompt should a non sighted user want to copy and save the image.

I'm not generally a fan of TITLE text but here it is being used perfectly: to provide supplementary information i.e. explaining that the link takes you to the client website rather than a page about the website in the Copious portfolio. As an aside title text should always be used sparingly and never repeat information already contained in link text and alt text.

back to top

Want 'more'?

There is a case for having a 'more' link at the end of a news item. It acts a as good verbal cue to those that may not think to click on the image or the link. It's a controversial one however as traditionally 'more' links are to be avoided as they don't give anything away as to what the page destination is. Also, repeated 'more' links on a page creates a navigational headache for screen reader and voice input users alike as they are not uniquely descriptive of the page they link to.

Voice input users will navigate a page by speaking the link they want to tab to or activate. If there are multiple 'more' links this can become a bit of a mess. Equally screen reader users have the option to list links alphabetically in a page using their screen readers. Listening to repeated links can end up getting you lost in a page.

back to top

Screenshot

Illustration 3: Jaws links list dialogue box showing repeated 'Read post' links.

There are many factors at play which may influence how to fine tune this but currently I would choose to not have 'more' links as my feeling is that while a handful of users will feel some negative impact it's screen reader and voice input users would have a significantly harder time of it. It's a judgement call however and you may well feel that for your type of content and your type of user there may be a viable reason.

back to top

HTML5

Something that looks promising is HTML5 block level linking. This essentially allows you to wrap entire blocks of content into one link: image, heading, 'more' links and, significantly, the paragraph of text introducing the news article. Taking the Copius example above it could be easily changed as follows:

<a href="http://www.bioup.com" title="Visit the Bioupdate Foundation website">
<img alt="Screengrab of the Bioupdate Foundation homepage" height="155" src="img/projects/thumbBioup.gif" width="188" />
Bioupdate Foundation
</a>
<p class="tags">Website for education and training events in biotechnology</p>

In HTML4 and XHTML1 wrapping round multiple block level elements is backward compatible but your page wont validate. The good news is that if you have an HTML5 docytpe the page will be both valid and backwards compatible.

back to top

WAI ARIA

WAI ARIA (Web Accessibility Initiative Accessible Rich Internet Applications) is a W3C specification that aims to increase the accessibility of dynamic content and user interface components. It provides additional hooks in a web page or application for better semantics to be passed through to assistive technologies such as screen readers as well as provide better keyboard navigation.

One technique used to facilitate better keyboard navigation of complex components in a web page is negative tabindex (tabindex="-1"). What this does is effectively remove any element given a negative tabindex from the overall tab order of a page.

Using negative tabindex to remove duplicated image links from a page is an excellent work around coined by Gez Lemon from The Paciello Group. If applied to the image the keyboard only user skips over the image in the tab order (therefore removing the duplication) but the image itself remains clickable for those sighted mouse and mobile users that need it. Have a look at the code below:

<a href="" title="Visit the Bioupdate Foundation website" tabindex="-1">
<img width="188" height="155" alt="" src="img/projects/thumbBioup.gif/>
</a>
<p>
<a href="">Bioupdate Foundation</a>
</p>

The image has a negative tabindex applied. The keyboard only user will therefore skip that image in the tab order.

back to top

Summary

At it's heart accessibility is about people. Technology, code, guidelines and even access technology are the supporting cast so when making pages accessible to multiple users with diverse needs ask yourself not just if content is accessible but if it's usable.

Always aim to reduce duplication of links but keeping in mind those users who benefit from larger click-able areas. Emerging techniques such as HTML5 and WAI ARIA aim to help by plugging the gaps in HTML4.

Resources

• Combining adjacent image and text links – WCAG 2.0 Techniques
• Keyboard accessibility – Patrick H. Lauke
• Using the HTML TITLE attribute – Steve Faulkner
• Block level links in HTML5 – HTML5 Doctor
• Introduction to WAI ARIA – Gez Lemon

back to top