21 July 2011
Mark Palmer Design looks at the implications both for usability and accessibility of writing poor link text.

It’s fairly widely accepted in both usability and accessibility circles that ‘click here’ links are not a particularly user friendly or efficient means of providing navigation on pages. In particular, a page littered with ‘click here’ links can cause particular issues to users of screen reader software.

Many screen reader users utilise some form of ‘links list’ functionality within their screen reader software in order to save time when navigating through a site. This ‘links list’ functionality, unsurprisingly, brings up a list of the links on the page in a separate window, which can then be navigated through using the cursor keys or by pressing the corresponding letter of the alphabet on the keyboard to jump to all links starting with that letter.

The problem with ‘click here’ links is that if there are a number of such links, they are indistinguishable from each other as the link text provides no distinguishing information.

It’s not only ‘click here’ though. Many sites provide further information on products or services by using ‘find out more’ links or something similar. Consider an example where products are broken down by product type. Some example products are given but the product range is more extensive, so a ‘see all’ link is provided under each product type.

These ‘see all’ links are no better than ‘click here’. OK, so they are slightly more descriptive but no more distinguishable from each other.

So how do we fix this? Well, in this instance it is likely that anyone browsing visually should be able to determine what each ‘see all’ link refers to. Our main area of concern is screen reader users.

We need to expand on these ‘see all’ links without making the page difficult to read and unweildy for the sighted user. We also want to maintain the integrity of the layout. Changing the first see all link above to read ‘See all banking products’ would seem like a quick win solution. On reflection though, the clear, column layout of the page would result in either uneven columns or text wrap, depending on hwo the page was built. A link over two lines is difficult to read and may affect certain other disability groups and there is no point in robbing Peter to pay Paul.

The key thing to remember here is that screen readers read the underlying markup and not what is actually visually displayed on screen. In many ways, screen readers are poorly named. Armed with this knowledge we can add additional information to the hyperlink in the markup and hide it off screen by setting a negative ‘left’ position within the CSS, safe in the knowledge that we are providing additional information for assistive technologies whilst maintaining the original design on the page.

In this case we would extend the actual hyperlink text but hide the additional information we did not need to display visually by literally placing it outside the viewing window on the page.

Currently, sample markup for the hyperlinks shown above would be as follows:-

See all;

We can however, provide more information for screen reader users by amending the code as follows:

See all banking products

Finally, we create a CSS class called ‘extrainfo’ and, using absolute positioning, set the ‘left’ position of any element spanned by the ‘extrainfo’ class to -1000px.

.extrainfo{
position: absolute;
left: -1000px;
width: 800px;
}

Now, when listened to through a screen reader, either in the ‘links list’ panel or otherwise, this link will be read out as ‘See all banking products’. Obviously this same approach could be applied to the very commonly found ‘find out more’ link.

Previously published by Mark Palmer at uservisionblog.co.uk.