Article: Skip Links by Adrian Rayfield
Last edited: 07.10.2006
Skip Links - What are they?
Skip links are internal links or local targets placed in an (X)HTML page to enable people to skip over repetitive elements such as links. Who can use these? Anyone can use them but they are normally used to assist disabled users.
Typical users of skip links are:
- Blind or visually impaired
- Physically disabled
- Users of assistive technologies, such as screen readers
The reason they are essential is to provide a way for a user to bypass repetitive elements on a page. Imagine using a screen reader and having to listen to 20, 50 or more links being read out before actually getting to the content of the page and having to do this on every page you visit. I think you would agree it would get very tedious, not to mention a waste of time.
Ways to skip repetitive links are part of both the Web Content Accessibility Guidelines (WCAG 1.0) and Section 508.
WCAG 1.0 checkpoint 13.6 [Priority 3] states Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group.
Section 508 1194.22 Web-based intranet and internet information and applications states (o) A method shall be provided that permits users to skip repetitive navigation links.
How to implement them
Skip links used to consist of a spacer image, 1 pixel by 1 pixel (invisible to the naked eye) with an alt text saying something like 'Skip to content'. The image would link to the beginning of the main content on the page. A screen reader would read the image alt text for example and the user could 'skip' over the repetitive element.
This was a basic and early way of doing things but it didn't enable physically disabled or keyboard users to use this function.
As you can see if you copy and paste this code, the image is invisible. Change the border from 0 to 5 and try it again, you will now see the border around the image.
<html>
<head>
<title>Skip link 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><a href="#content"><img src="" alt="skip to content" width="1" height="1" border="0"></a>
<a href="#"> Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a> |
<a href="#">Link 4</a> | <a href="#">Link 5</a></p>
<h1 name="content" id="content">MAIN CONTENT STARTS HERE</h1>
</body>
</html>
Next came the 'visible' skip link. This was simply a text link at the beginning of the repetitive element linking to the start of the main content which allowed all users to see or hear and therefore use this function.
(To see this in action copy and paste and add some content between the links and the <h1> so you have more than one page of content i.e. a scrollbar)
<html>
<head>
<title>Skip link 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><a href="#content">Skip to content</a> | <a href="#"> Link 1</a> | <a href="#">Link
2</a> | <a href="#">Link 3</a> | <a href="#">Link 4</a> | <a href="#">Link 5</a></p>
<h1 name="content" id="content">MAIN CONTENT STARTS HERE</h1>
</body>
</html>
The trouble with the visible skip link is that it can cause confusion to those users who are unaware of its purpose as clicking on it may not actually make any noticeable change to the page. To overcome this problem and as CSS has become more popular, developers have turned to CSS to find a solution that will allow all users to use this function and, at the same time, be hidden for those that don't need it. The solution is CSS which hides the link unless tabbed on, at which time it becomes visible, thus allowing keyboard users to use it. In addition, the code is within the page, so screen readers and other assistive devices can 'read' the skip links within a page.
We have implemented this here on Rayfields.co.uk. When you enter a page and hit the tab key, (you may have to hit it more than once depending on your browser) you will see a yellow box with red text, these are the skip links. There are two of these; 'Page content', which will take you to the main content of the page once you hit enter/return, and the second 'Global Navigation' will take you to the beginning of navigation on the right of the page once you hit enter/return.
In both cases, continue tabbing and you will go to the next link. So in the content you will move to the first link in the content area and in the navigation you will cycle through the global links.
Details of using this method can be found in our tutorial, 'CSS Skip links'.
There are two methods of hiding skip links with CSS; the first is by having the text the same colour as the surrounding background until the link is in focus and it then changes to a visible colour combination.
The second method, and the one we use, is positioned links. These are positioned off the page and also hidden via a span and CSS until they are in focus and they then come into view positioned on the page.
There is - as you no doubt have come to expect - a browser bug with skip links, Internet Explorer 5.5 and 6 move visual focus but not always the input focus. This basically means you could be going from the skip link to the content and back again with every press of the tab key. There is a hack for this that seems to work well. We shall also be covering this in our tutorial.
Should I be using skip links?
In a word, yes. The accessibility and usability of any page that uses skip links is far greater than those that don't.
Don't forget you can use these to skip around the page; you can skip over links or skip to the main or sub navigation, to a search box as well as over any repetitive element that appears on your pages.
Article written and copyright held by Adrian Rayfield of Rayfields Accessibility © 2006.
Did you find this article / tutorial useful, please give us your comments.
For more information on Rayfields Accessibility Consultancy and Web Development Services please contact us by telephone on 0845 0037 508 or email : accessibility@rayfields.co.uk.
