Skip links are an accessibility feature to help visitors navigate their way around a document. Ask two different developers on how best to implement skip links, and you'll very likely receive two different replies. Some people like visible skip links, others like hidden skip links, and some people don't like skip links at all. This article examines the different approaches of implementing skip links.
Author: Gez Lemon
- Using Skip Links
- Hiding Skip Links
- Usability Concerns of Hidden Skip Links
- Verbs and Link Phrases
- Alternate Style Sheets
- Accessibility and Skip Links
- Further Reading
Using Skip Links
Skip links are links to another part of the page that allow visitors to navigate their way around a web document, without having to cycle through a huge list of links. A common misconception is that skip links are just for screen reader users. This is probably borne out of the fact that a lot of people still regard accessibility as being primarily for those with visual impairments. Skip links are beneficial to screen reader users, and keyboard users in general, but they're also useful to other groups; primarily, people with mobility difficulties. This discussion isn't concerned with whether or not content is delivered first. Ideally, the content should be delivered first, but that doesn't negate the need for skip links. There should be a mechanism to go directly to the navigation if content is delivered first, and there should also be a means of bypassing the group of links, wherever they are in the document.
Hiding Skip Links
The first incarnation of skip links were visible, but designers typically didn't like them because they take up valuable screen estate. On the false assumption that skip links were only useful to screen readers, designers used CSS to hide them. Early attempts at hiding skip links used
display: none, until designers discovered that
display: none was, correctly, honoured by the most popular assistive technologies, such as JAWS. Techniques such as the off-left method devised by Bob Easton, were later used to hide content from visual displays, leaving them accessible to screen readers. Later, developers realised that these links were also useful for keyboard users in general, and developed techniques to reveal the skip link when the link had focus. This technique is certainly better than not providing a means to bypass a group of links, but still hides a useful feature from the very people that could make use of a skip link.
Usability Concerns of Hidden Skip Links
Donald Norman of the Nielsen Norman Group, introduced the basic usability terms, "gulf of execution", and "gulf of evaluation". The gulf of execution is concerned with how intuitive a system is with regards to the user's intentions, and its interface. Invisible skip links that reveal themselves when a visitor tabs through the page, offer no clues to visitors who want to bypass a group of links. From a usability point of view, invisible skip links that reveal themselves when they have focus fail the gulf of execution, as there is no way that a visitor could be aware that such a thing exists by glancing at the page, unless they were told about the unexpected behaviour in advance.
The gulf of evaluation is concerned with perceiving and interpreting what has happened. It is reasonable that a visitor tabbing through a list of links will perceive and correctly interpret that there is a skip link, providing they're paying attention to the screen. As the gulf of execution is missing with invisible skip links that reveal themselves on focus, it's also reasonable to expect them to be missed, and not used by the people that would benefit from a skip link. Invisible skip links fail both the gulf of execution, and the gulf of evaluation.
There are probably loads of use cases for visible skip links, but they may not be obvious unless you yourself require the use of a visible skip link, or you've observed someone who would benefit from a visible skip link. I've worked with two people that used switch adapted mouse joysticks who benefited from visual skip links. I've also observed people with low vision, struggling to make their way around a page who could also have benefited from a visible skip link.
Verbs and Link Phrases
There is also a problem with the terms used for skip links. Traditionally, actions defined by verbs should be represented with a command button (sort column, submit, etc). Links are supposed to be concise phrases that clearly identify the target. Using a link phrase of "Skip Navigation" will not mean anything to a lot of visitors to your website. Yes, I know I have a link phrase of "Skip Navigation", but that's because I'm inherently evil. A better convention would be to use a proper link phrase, that isn't defined by a verb.
The table of contents at the start of this document contains links to the headings in this document. The very first link, "Using Skip Links", is effectively a skip link, as it provides a means of bypassing the group of links. Using this convention is more intuitive than adding a redundant link of "skip sub-navigation", which would effectively only do the same thing as the first link in the table of contents. With more thought, there is no reason why developers couldn't include meaningful skip links in a document that was beneficial to all.
Alternate Style Sheets
One solution to whether or not skip links are visible is to use an alternate style sheets. Using an accessible alternate style sheet is better than nothing, but isn't likely to be that useful, unless the accessible style sheet was the default style sheet. Internet Explorer (IE), still the most popular browser in use on the Web today, doesn't have its own method of style sheet switching, and requires authors to add that functionality with a style sheet switcher. Creating a style sheet switcher is a simple enough task, but developers are likely to implement them inconsistently, meaning that people who use IE won't have a standard means of switching style sheets. Browsers such as Firefox, Mozilla, and Opera, all provides a consistent means of style sheet switching, but tend to be used less by people with assistive technology; not a failing of the browsers themselves, but a failing of some manufacturers of assistive technology.
Accessibility and Skip Links
Some people, quite rightly, argue that they don't see why they should be required to clutter their documents with skip links to enable people to navigate their way around a document. This basic functionality should be achievable through the user agent alone. If lists of links are marked up as a list, user agents should provide a means of bypassing them. For a more detailed view, see Anne Van Kesteren's article, which makes a good case as to why skip links should be a markup problem, not the developer's responsibility. Some assistive technology, such as JAWS, provides various means for visitors to navigate their way around a document; for example, by the headings used in the document. Unfortunately, assistive technology such as JAWS is very expensive.
The Web Content Accessibility Guidelines (WCAG) are prioritised, ranging from important issues to help remove serious accessibility barriers, to issues that can be beneficial to certain groups. Skip links fall into the beneficial category, and are not considered vital for a document to be considered accessible. WCAG 1.0 checkpoint 13.6 requires that
content authors group related links, identify the group (for user agents), and, until user agents do so, provide a means of bypassing the group [Priority 3]. The following explanation is provided for priority 3 checkpoints.
A Web content developer may address this checkpoint. Otherwise, one or more groups will find it somewhat difficult to access information in the document. Satisfying this checkpoint will improve access to Web documents.
WCAG 2.0 is in draft form at the moment, and is subject to change before becoming a candidate recommendation. The relevant guidelines for skip links in WCAG 2.0 is guideline 2.4, which states that content authors should
provide mechanisms to help users find content, orient themselves within it, and navigate through it. Point 3 of the level 2 success criteria states:
Blocks of repeated material, such as navigation menus and document headers, are marked up so that they can be bypassed by people who use assistive technology or who navigate via keyboard or keyboard interface. [V]
The 'V' in the guideline indicates that this is a visual requirement. This has a level 2 success criteria:
- Increase accessibility through one or both of the following:
- further facilitating the ability of user agents to provide accessible content
- recommending content and/or presentation that provides direct accessibility without requiring users who have disabilities or their user agents to do anything different from users without disabilities or their user agents
- Can reasonably be applied to all Web resources.
Skip links are beneficial to keyboards users, people with mobility problems, and possibly other groups too. The most usable means of implementing skip links is to leave them visible, so that people who require them are aware they exist. Methods such as implementing hidden skip links that reveal themselves on focus, and alternative style sheets, are definitely better than not providing a means of navigating around the document at all, but may be missed by the very people that require them.