Providing 'Skip Links'

Once the information on a web page has been made, strictly speaking, accessible to assistive technologies, the question then becomes whether or not that site is 'easy-to-use' for people with impairments. It is not always enough to retrofit accessibility features to a pre-existing site that was designed without considering the needs of these users.

Achieving user-centric accessible design requires that people with impairments must be kept central to the design process from the outset. The opinions of web accessibility experts, user interviews and user testing will help glean a clear picture of their requirements.

So what practical steps can developers take to make web sites easier to use? Checkpoint 13.6 of the Web Accessibility Initiative Guidelines (listed as a Priority Three issue) states that where ever possible 'Group related links, identify the group' and 'provide a way to bypass the group'.

What does this checkpoint mean and how much easier does compliance make the web experience? Let us look at a simple example. A navigation bar is often the first thing that is come across on a page. For screen reader users, this usually means having to hear a large number of repeated links on every page before they arrive at any unique content. Providing a link that will skip over these repetitive links and allow the user to start reading at the beginning of the main body of the page provides task and time efficiency for the user. They can now navigate the page effectively and with considerably less tedium.

Although some screen readers (like JAWS) provide an option to skip links that are the same on subsequent pages. The functioning of this option is at best hit and miss, so it is better to provide for it proactively.

How to do it?

Here are two methods for skipping groups of links. The option you choose will depend on your development requirements and priorities.

Text-based method

It has been suggested that the skip link should take the form of hypertext that links to a named anchor, placed at the beginning of the unique content. It may be acceptable to make the link text extremely small (using CSS of course) so that it is almost invisible. Indeed, one could also consider putting the link in the form of a character such as an underscore. Appropriate link title saying, for example, 'skip navigation' is of course essential in all instances.

Image-based method

Again if it is invisibility that you are after, why not use a single pixel 'invisible' gif. Use of the anchor tag and suitable alt text will again have the desired effect. This is easy to implement and has little impact on the page.

Visible or Invisible?

Before implementing either of these methods, it's worth considering whether "skip links" should be hidden or visible on a web page. Most commercial sites are not willing to have skip links clutter their design and prefer that they are invisible. They do not want the sighted user to be distracted by the link, asking "I wonder why that's there?" There is also an argument that if skip links are introduced for the benefit of those using screen reading technology, there is no reason for them to be visible.

However, one must consider people with other types of impairments in this context also. Ask whether or not skip links would be useful for people who cannot easily use a mouse? Many of these people depend on tabbing in order to make progress through an interface and might appreciate a skip links feature to lighten the amount of work they have to do. If there is no visible focus to let these people know they have hit a link then this useful feature is lost to them.

If you do decide to make the skip link option visible, place it in the most unobtrusive place possible. For example, consider putting the skip links on the top right rather than the top left, as this is easier to ignore for people who don't want or need to use it.