Skip links are an accessibility feature intended to help visitors navigate their way around a web document. They are sometimes called jump links as well. On a web page they will typically be read as “Jump to Content,” “Skip Navigation,” or some variant thereof.
They are offered primarily by accessibility-aware developers, but, strictly speaking, the potential need for their very existence is directly related to user-agent or UA shortcomings. The system is broken, but developers — and users — are stuck with it for now. It’s unreasonable to expect developers to make up for the shortcomings in UAs, and it’s obviously better for everyone if these types of features are provided in a consistent manner by UA manufacturers, rather than being implemented inconsistently, if at all, by developers.
Because skip links are a UA issue, they fall into the dreaded “until user agents” category of WCAG 1.0 under Grouping Related Links: 13.6 Group related links, identify the group (for user agents), and, until user agents do so, provide a way to bypass the group (Priority 3). The by-pass, of course, is the author-provided skip link.
The better UAs offer at least some features that allow users to navigate their way around a document. For example, the Home and End keys will move to the top and bottom of the document respectively in IE, Mozilla, and Opera on a Windows platform. Browsers like Opera offer additional keyboard navigation aids, such as Tab and Shift+Tab to cycle forwards and backwards respectively through interface controls, a and q to cycle forwards and backwards respectively through links, and s and w to cycle forwards and backwards respectively through headings. These are great features, but unless all UA manufacturers support them, these features will remain in obscurity.
In time, as UAs become more usable for people with disabilities by following UAAG, well structured documents that make good use of semantics, such as well-structured headings, will provide convenient mechanisms for people to navigate the document. This is certainly true for screen readers; documents that are well structured are usable by people using screen readers regardless of any skip links provided by the author, such as H and Shift+H to cycle forwards and backwards through headings, respectively, and even provide navigation by heading level.
Although skip links are undoubtedly a user-agent issue, they’re still an undeniably useful mechanism for people whose UAs fail to properly provide these important features and as such offer them only a limited ability to easily navigate a document. For example, people with mobility problems are a group that are likely to benefit from extra navigational features supplied by their UA or, if they don’t exist, author-provided skip links. They may also be useful to users who don’t fully understand the capabilities of their chosen UA.
We’ve determined so far that while the UAs are ultimately responsible for providing these features, many do not, or fall short, and do it an inconsistent manner. We’ve also determined that your average web user is more likely to not understand the power of their UA and will simply muddle through the task of browsing, perhaps not even content with the experience or the UA’s default settings.
Since this is the case, the implementation should have a best practice to which developers can subscribe. By adopting a best practice, developers can provide the consistency needed to make something web wide that will properly meet the needs of users. And if more users are to gain understanding, mass adoption will be possible. Consistency breeds familiarity, and the latter gives users confidence. But what would the best practice, or practices if variations are needed, be? The following is the advice from two practitioner’s on how best to implement skip links efficiently.
First Mike Cherim will share his thoughts:
Accessibility is an essential aspect of designing a website. So is usability and all that other stuff Accessites supports. But I love design. To me is an incredibly important part of a successful site. Not to say it has to be designed heavily, a site should look good in whatever thematic it wears. I take this and try to run with it in all my designs. I want my sites to look stunning, and sometimes stunning means not having a top-level navigation — the natural home of our beloved Skip Link as I’m sure Gez will tell you. In my opinion, sometimes links above the header just don’t work. Or, as a designer I choose not to try. Instead I opt for an alternative method I like to employ and often do. That is, I like to hide them, but I do so in a way to ensure maximum on-demand availability.
I use an off-screen method, typically taking an unordered list and sending it a few thousand pixels into the darkness off-left — using the
none should be avoided to ensure access to screen reader users. Then, one-by-one, employing
a:active for IE users) in the CSS, I bring the anchors, not the list items, into view. In the interest of a best practice, I recommend locating them, when viewable, in the upper-left or across the top, giving them a good background and enough positive
z-index in the CSS to ensure they stand out. An example of this is available right here on this site. Press Tab a couple of times to see the available skip links in action.
The beauty of this method is the links are available readily so on some UAs, and on demand to those who need them on other UAs. If done right, this type of skip link won’t be missed by the user. The downside, well, admittedly, this method doesn’t work for Opera users (it’ll never be as reliable as a link plainly on the page), but it could be argued that the Opera browsers lacks not in the area of browser support of usability and accessibility so it’s one of those browsers that doesn’t really need the developer’s help. Another drawback, due to spotty CSS support in some legacy browsers, any skip links using this method will be plainly visible at the top of the screen, actually pushing the header down. In my eyes, though, that’s fine. I’m not at all disturbed the IE 4 user sees my site this way. I’m pretty sure the IE4 user is accustomed to seeing myriad site “defects” all over the web. They work and that is enough for me.
Now Gez Lemon will share his thoughts:
A Call for Assistance
A common misconception is that skip links are purely for screen reader users. This mistaken belief is borne out of the fact that a fair amount of accessibility tutorials, forums, and discussion lists tend to regard accessibility as catering for people with visual impairments, and little else. Occasionally, they may consider other sensory difficulties or motor difficulties their visitors might have, and even more rarely, might even consider cognitive problems. Ironically, screen reader users are the very group that have little to gain from skip links, providing the document is well structured, and makes good use of headings. Skip links, if provided, are beneficial to many groups, including those with mobility problems. As accessibility also includes people with cognitive difficulties, they should be easily discoverable — optimum usability. From a non-accessibility point of view, they can also improve the usability of other devices, including mobile devices that can be cumbersome to use when the user is presented with a huge list of links.
Skip links have been through several incarnations; some of them quite ingenious. The very first versions were visible, but designers resented them being displayed as they take up valuable screen estate. Early versions of hidden skip links were implemented by turning a decorative image into a link that bypassed a group of links. The decorative image contained appropriate alternative text so that it was revealed to screen reader users and people using devices with images disabled/not available. For an example of hidden skip links being implemented on a decorative image, see the BBC’s News website. When it was pointed out that people with mobility problems benefited from skip links, and alternative text could not be relied on, as it’s not relayed to the visitor when an element has keyboard focus, developers came up with the idea of revealing them to keyboard users when they received focus. On the surface, this appears to be a reasonable approach…
The Usability Gulf War
The gulf of evaluation is a usability term that represents the difficulty with which a system can be perceived and interpreted in relation to the expectations and intentions of the user. In simple terms, the more closely something resembles the user’s expectations, the easier it is for the user to evaluate. The greater the gulf, the more likely it is for the aspect of the system under consideration to be considered a usability failure. Hidden skip links, however they’re implemented, completely fail this basic usability principle for some groups. There is no way for a sighted user to determine from a glance of the page that there is a way to bypass a group of links when the skip link has been positioned off-screen with CSS. People who aren’t completely dependent on keyboard navigation, but struggle to use a pointing device, are highly likely to choose the pointing device when confronted by a large number of links that would take a long time to tab through, as there is no obvious cue that there is a way to bypass the group.
The gulf of execution is another usability term that represents the difference between the user’s intentions, and what the system allows them to do. Hidden skip links fail the gulf of execution. As keyboard dependent users begin to tab through the navigation, providing they’re paying close attention, they might realise there was a flash on the screen as the hidden skip link revealed and removed itself as they navigated over the skip link. If they weren’t paying attention, for example, the user was looking at the keyboard as they began their arduous task of tabbing their way through the group of links, or their mode of operation means they cannot use the keyboard and look at the screen at the same time, the user will be completely oblivious that they’ve passed a skip link that could have been beneficial to them. For those fortunate to have observed the unexpected behaviour, we’re back to the gulf of evaluation, and hope that the visitor has correctly perceived and interpreted the unexpected behaviour to be a navigation aid that could help them. For people using mobile technology and a pointing device, there’s no way of knowing the skip link exists, and there’s no way for them to use the skip link.
Hidden skip links fail both the gulf of evaluation and the gulf of execution, whereas visible skip links help reduce the gulfs — the gulfs will still exist, as “skip navigation” is a technical term that’s not likely to mean much to the average web user, but it’s a lot closer than hoping that a user will perceive and interpret unexpected behaviour to be a useful feature. Removing verbs from the link phrase, and accurately describing the target for the link will further help reduce the gulf of evaluation.
User Agents & Consistency
Skip links are a user agent issue for a very good reason. When these types of features are added by developers, they’re highly likely to be implemented inconsistently; using terminology that isn’t familiar to the average web user, different methods of execution and discovery, and so on. When these features are implemented by user agents, consistency enters the equation. When user agents fail to deliver, then these features can be helpful — the proviso, of course, is that they’re most helpful when they’re easily discoverable and match the user’s intentions. It’s already been mentioned that users don’t always fully understand how to get the most out of their user agents — bearing this in mind, it’s slightly ironic that some developers have decided that providing a hidden feature is a suitable means of redressing the balance.
Hidden skip links merely pay lip service to a very real problem. People with mobility problems benefit from mechanisms to bypass groups of links. For people using user agents that don’t provide mechanisms to navigate around a well-structured document, or people unaware that their user agent has those capabilities, then it’s commendable that some developers/designers implement them for their users. Hiding them makes no sense, as it totally depends on the user being able to understand the mindset of a developer that wants to “tick off” a problem, without much regard as to whether or not the solution is discoverable and usable.
And now for my popularity award…
I appreciate that my view on skip links is not going to be popular with many developers/designers. A lot of developers/designers have bought into the concept of hidden skip links — some that unexpectedly reveal themselves, and others that remain permanently hidden. These types of skip links are only really beneficial to screen reader users; a group that would benefit more from well structured documents. When accessibility is considered from the ground up, if features such as skip links are considered important, they should be incorporated into the design. It’s not beyond the capabilities of a good designer to incorporate visible skip links that meet the user’s intentions and expectations, whilst not detracting from the design; it just demands creativity and an open mind.