LessFuss Design

Adding features that help improve the accessibility of a website is a good thing. But sometimes accessibility features can conflict with each other when used inappropriately. Providing skip links while also setting the tab index on links is a good example of two common accessibility techniques which, if you’re not careful, can end up doing more harm than good.

What are skip links?

Skip links are those links you sometimes see at the top of web pages called ‘skip to content’ or ‘skip navigation’. If you’re a sighted, mouse-savvy user then they’re of little use to you (click on one and all that seems to happen is the page jumps down a bit).

But to blind people using screen reader software, or for people who cannot use a mouse and rely on the keyboard or switch devices to move around a web page, they can make life a whole lot easier. The skip link is set to jump straight to the content of the page when you click/activate it, missing out all those links you get at the top (often including the site’s main navigation). To us sighted types, the content is literally just underneath those links – but to blind users, the first sentence of content can be ages away, behind a long list of links that get read out. Highly annoying when it happens on every page you visit, and a real pain for keyboard-only users who have to repeatedly press the tab key through each of those links.

The skip link allows blind users, and those who have to use the tab key on the keyboard, to get past all those links quickly and get straight to the content. Simple and effective.

What is tabindex?

Tabindex is an HTML attribute that you can specify for a number of tags – notably the anchor tag and form input fields – to control the order in which those elements are focused on for people using the tab key to navigate. In the code it looks like this:

By default, tabbing through a web page will take you through each link or form field in the order they are put in the source of the page. By using tabindex, you can override the default tab order and set the flow of movement through a document exactly as you want it.

So what could possibly go wrong?

I came across the following bit of code recently while taking a look at how widespread use of skip links are on big corporate sites. It’s simplified to give you a good idea of what’s going on:

In this example the developer has placed a skip link that will take focus past all the navigation links and down to the start of the page content. They’ve also given the homepage link a tabindex of 0 – making it the first link to get focus from using the tab keyboard key, even though it isn’t first in the order of things on the page.

The effect of doing this is that the skip link is now pretty much useless. When they first tab on the page, the keyboard user will go straight to the Homepage link (why?) – and if the skip link itself is hidden on-screen (which is by far the most common implementation) – they’ll have no idea it’s even there. Despite the fact a skip link is present, a keyboard-only user is still forced to tab through all the links on the page to get to the content.

Tick-box accessibility

This kind of thing is the by-product of a tick-box mentality in accessible web design and development, the second of three stages of awareness put forward by Roger Johansson in ‘Making accessibility more real ’:

To some web professionals, accessibility means nothing because they aren’t aware it exists. To others it is a checklist of items that need to be ticked off because their boss or client tells them to. Others yet may use the same checklist as a guide that helps them understand accessibility and how people with disabilities use the web.

While the ideal approach for any developer should be the third – actually thinking about the effect what you do will have on users with disabilities – don’t think that the second approach (tick-box) is a good fallback. Yes it’s possible to learn every technique out there for helping to make web pages more accessible, but sometimes – as the example above shows – adding all of them to the mix at once can be totally counterproductive.

Final word on tabindex

The site I found this particular issue with made extensive use of tabindex. It was peppered with them. Personally I’m not a fan of tabindex and never use it. Any time you start messing with the flow through a document, you can get yourself and your users in knots.

Keyboard users in particular can have issues with tabindex. A keyboard user may use the tab key to navigate, but they may also use the arrow keys – if tabindex is being used, they’ll get a completely different experience with the tab and arrow keys, which isn’t going to do much for their faith in your website.

The ‘best answer’ for tabindex on webdesign.about.com , written by an accessibility consultant , best sums up for me the misconception that tabindex helps users to navigate websites:

There is one page I use for About every week that I have to tab 24 times to get to the only button on the page that I ever click. (There are 23 other “navigation” links ahead of it.) This can be very frustrating… Please! Use tabindex! It’s a simple way to improve your pages. They’ll be accessible and more usable. And I for one, will thank you for it.

For this author, there is one particular link that she would love to be the first one she can tab to. And true, for her, giving that button a tabindex of 0 would make her life a whole lot easier I’m sure. But what about everyone else? Other users may have different links or buttons on the page that are the ‘only ones they ever click’. As soon as you start guessing or assuming what the most important link on a page is and set it’s tabindex to 0, you’re taking away your users’ power to choose what they do. And that is something no user will thank you for.

I’ll give the final word on tabindex to WebAIM from their excellent article Web Accessibility Gone Wild : ‘Don’t use them’.