Summary
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
Contents
- Using Skip Links
- Hiding Skip Links
- Usability Concerns of Hidden Skip Links
- Verbs and Link Phrases
- Alternate Style Sheets
- Accessibility and Skip Links
- Conclusion
- 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.
Conclusion
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.
Further Reading
Category: Accessibility.
[skip-links.php#comment1]
I'd strongly argue that the current draft of WCAG 2.0 is wrong in classing this as a visual requirement. First of all, the language: saying "are marked up so that they can be bypassed" does not imply that I need to add an extra link to skip past it...it means I need to mark it up as a single unit (e.g. an unordered list, or in the worst case wrap it all up in something like a DIV).
And looking at the editorial note for this point "General Techniques might include something about satisfying this criterion through metadata" ... please somebody explain to me how metadata can be visual? A further indicator that this should not be visual at all...
Also: again, the onus seems to fall on the web developers to make up for missing browser functionality. What about the User Agent Accessibility Guidelines (UUAG)? Oh, that's right...it's easier to impose requirements on us than on browser manufacturers, I forgot.
Posted by patrick h. lauke on
[skip-links.php#comment2]
oh, and while we're talking about 2.4: what's with the arbitrary "Documents that have five or more section headings"? Why not six or more? Sounds to me like a variation on the 7+/-2 rule here...
Posted by patrick h. lauke on
[skip-links.php#comment3]
The language used is an acknowledgement that this really is a user-agent issue. Unfortunately, most user agents do not provide a means to bypass groups, which leads us to an "until user agents" requirement, which WCAG are desperately trying to avoid.
WCAG 2.0 is a draft document, so nothing can be taken for certain at the moment. The editorial note is talking about the possibility of a future method. It wouldn't work today, so couldn't be a best practice recommendation at this point in time. The 'V' for visual couldn't be clearer that at this moment in time, they're intending to recommend that the means to bypass groups of links is a visual requirement. Success criteria 2 is all about extending functionality above and beyond what a user agent may offer, so it is a reasonable requirement to make skip links visible for level 2.
The real issue here isn't about guidelines, it's about providing an accessibility feature that benefits certain groups, and ensuring it is usable. With thought, authors should be able to include skip links in an intuitive way, that doesn't detract from the design.
You're probably right. I've a feeling that a consensus hasn't been reached on the exact number of headings and is still under discussion, although it could have been resolved since I last looked.
Posted by Gez on
[skip-links.php#comment4]
My personal opinion, not withstanding the requirements of a Web site as made by a client, is to make skip links visible and clickable. The same thing holds true for accesskeys, which I combine into one interface on my personal site.
Many novice users, who may not have disabilities and yet may benefit from these navigational devices, aren't even aware of their presence.
I'm also an advocate of combining anchor focus with hover pseudo-classes for users that prefer to tab through a document.
I know what you mean by the phrasing Gez, I struggled with that too and still couldn't come up with a good solution: go directly to content?
Been super busy, I owe you an email...~d
Posted by Douglas Clifton on
[skip-links.php#comment5]
Fantastic article. Only glitch: there's a typop in the 'Conslusion' header.
Otherwise, great work, thank you.
Posted by mort on
[skip-links.php#comment6]
Re phrasing, note that if you use something like "skip to content", in Jaws, it reads "content" as an adjective (skip to happiness!)
In this example, "Skip to main content" will make sure this is read out correctly.
Whether that is good in the wider sense, I don't know.
Sometimes I see "skip this section and go to the next section of links, which is for xyz..." etc. It is more wordy but gives a screen reader user a better idea of what they will be skipping to. Though this may be an example catered for screen readers only.
I wish HTML 4.01 hadn't deprecated the menu tag as that seems ideal. User Agents would have less excuse not to implement facilities for their users to by-pass menus...!
Posted by Anup on
[skip-links.php#comment7]
Hi Doug,
It's difficult to come up with a generic term, that doesn't contain a verb defining its purpose. "Main content" is the best I can think of, but it's not that intuitive. I suspect that would be a problem with any generic term. Phrases like "Using skip links" is much better, but I can't think of a more generic term that clearly identifies the target.
Hi Mort,
Thank you for your kind words, and pointing out the typo; fixed
Hi Anup,
I'd noticed that 'content' was read as an adjective, but didn't realise it changed on context. Thank you for pointing it out, that's really useful to know.
I think that level of verbosity is good for everyone, but possibly belongs to the title attribute, with a link phrase of something like, "links for xyz". The problem with link phrases like "links for xyz" is that it's not obvious that the visitor is currently in another section without the introduction of the verb, "skip". A fuller description of the link in the title attribute would help give context, but may be missed by some visitors.
Posted by Gez on
[skip-links.php#comment8]
Nice article Gez well done.
I get the feeling that most people see 'skip' links as only required for a site menu. This obviously isn't the case, but still people miss the fact that a 'skip' link should be provided for any list of links no matter where they may lie in a document. Which I saw you touched upon briefly.
But why 'skip'? why not 'jump'? or even 'hop'? Anup brought up a good point, and the wording of these should really be consistent to ensure greater accessibility.
'Skip navigation', 'skip menu' and 'skip site links' might not all be 'skipping' the same thing.
'Go to' is another term often bandied around, but then you don't necessarily know what you are missing.
You yourself use '[Back to the contents]' to jump back to the contents list for the page. Nothing wrong with it, but it made me stop and wonder. Why? Well I'm so used to 'Back to top' links, that is what I expected it to do!
(not really saying much there was I!)
Posted by Rich Pedley on
[skip-links.php#comment9]
Hi Rich,
Hop, skip and jump are all verbs. I don't think I made my point well about the phrasing of skip links, so I'll try and expand a bit on my original point.
One of the most important aspects of usability is consistency in the user interface. When a visitor looks at a form control, the choice of control, along with the prompt and its position, helps the visitor understand what's required. Interface elements are committed to people's long-term memory, so they bring assumed knowledge that helps them understand what's required from them.
Anchors link to a document, or a document fragment. The link phrase is supposed to identify the document or document fragment that the visitor will arrive at if they follow the link. Adding verbs to link phrases is confusing to visitors, as it's phrased as a command. Visitors expect commands to be represented with command buttons, not in a link phrase. A common problem with skip links is that some people just do not understand what they're for. It's not their fault they don't understand; skip links containing verbs that define their action are not consistent with user interface design principles. It's obviously not outside the ability of a typical web user to comprehend the purpose of skip links; it's just that skip links are an oddity.
For skip links to work effectively, they need to be phrased better so that people understand what they're for, and not go against basic usability principles. The first link in a table of contents that links to the headings in a document is a good example of a skip link with a suitable link phrase. I don't have any good suggestions for generic skip links, but something like "main content" is better than "skip navigation" or "jump to main content".
Posted by Gez on