By OZeWAI member Andrew Downie, Accessibility Consultant.
What is a skip link?
A recent experience, discussed below, gave me the inspiration to write this article. But let’s start with an explanation of skip links. As the name suggests, it is a link that let’s one jump (or skip) to somewhere else on the page. The most common practice is to have the skip link as the first focusable element on the page and with the main content of the page as the target. But a skip link could be used anywhere on the page to allow the visitor to skip a large area of content. Potential beneficiaries of skip links are screen reader users and (especially) keyboard-only users. The relevant WCAG (Web Content Accessibility Guideline) Success Criterion is 2.4.1 Bypass Blocks, which requires that “A mechanism is available to bypass blocks of content that are repeated on multiple web pages”.
The Web Directions experience
Once again in November 2024, OZeWAI was invited to have a stand at a Web Directions conference, this one the Develoepr Summit. The purpose was to discuss with conference attendees the importance of accessible web design and development. People were invited to have their sites reviewed by a screen reader user called Downie, who claims to be competent in its use and with some coding knowledge. Some sites were pleasingly accessible while some received the “Could do better” report in one or more areas, along with a constructive discussion about remediation options. But the recurring theme was a skip link that was hidden. That is, I could find and activate it easily with the screen reader but it was not visible on screen.
As mentioned above, a skip link may be of benefit to screen reader users. But screen readers provide quite a few tools for getting past large chunks of content. Assuming a well-structured page, one option is navigating by headings. That can be any heading or the next heading at a specific level. Another is to navigate by landmarks. Inclusion of the HTML elements <header>, <nav>, <main>, etc, allow a screen reader user to skip to each of them with a single key press. But keyboard-only users usually do not have such tools at their disposal and, without a skip link, must tab multiple times to reach the main content. While I don’t have supporting stats, I suspect that, due to disability or choice, there are way more people who largely or solely rely on the keyboard than there are screen reader users.
It was, therefore, disappointing to find several sites that hid the skip link from sight. There seems to be a widespread belief that skip links are only useful to screen reader users and the link is therefore not displayed on the screen. Even when keyboard-only users are considered, for cosmetic reasons the link is often hidden until it receives focus. That approach is workable provided (a) the relevant code works reliably and (b) a keyboard user cannot avoid tabbing to the link. It shouldn’t be assumed that the user will expect a skip link when it is not visible.
Further discussion
Following the experience at Web Directions, I discussed the issue with several very switched on people. They unanimously agreed that a skip link should be available to keyboard-only users. While there is debate about whether the link should always be visible, my strong suggestion is that it should be unless (somehow) that would catastrophically destroy the aesthetics of the page. Coincidentally, a When Is a Skip Link Needed article by Akash Shukla was published by TPGi a week after my Web Directions epiphany. This helpful article includes code examples and other useful information that won’t be duplicated here. The value of skip links for people using magnification is also mentioned, something I hadn’t considered.
But why stop with a skip to main content link? If the page is lengthy, it would be helpful to include a link (or more) to return the user to the beginning of the main content, as in the example below. For good measure, an adjacent link could return to the beginning of the page navigation. For people who find repeated presses of the tab key arduous, doing that in conjunction with the shift key would be at least as arduous. Wouldn’t it be nice if there was a way of making landmarks keyboard accessible? Well, Akash Shukla referred to a browser extension to do just that. That deserves further investigation.
In conclusion
Having a skip link as the first focusable element on the page that takes the visitor to the main content is good practice. Ideally, the link should always be visible. If aesthetics must trump usability, ensure that the link becomes visible on focus. If the page is lengthy, consider including links that allow the visitor to jump back up the page. Having provided the skip link(s), a useful and sometimes revealing test of a page’s accessibility is to tab through the page. If that simple test fails, the page does not meet WCAG Success Criterion 2.1.1 Keyboard, which is a Level A requirement. That is a topic for another day.