Many websites have large amounts of redundant content on every page. For example, an eCommerce store might have a header menu with links to different product categories.
If a user accesses the site with a mouse and keyboard, they can scroll past repetitive blocks of content to find what they need. However, if a user accesses the site with a keyboard or keyboard emulator, they will need to press the Tab key to skip past every link in the menu.
This can be especially annoying for people who use screen readers (software that converts text to audio or braille). These users will hear the navigation links announced every time they load a new page — unless the website offers an option to skip directly to the main content.
Examples of Skip Navigation Links
The simplest way to add “skip navigation" links is to provide a visible link at the top of each web page that sends the user directly to the beginning of the main content. The link should be one of the first focusable elements on the page. Crucially, the link must move the actual focus, not just the visual focus. In other words, the user’s focus must move past the blocks of repeated content.
If you’re concerned about your website’s aesthetics, you can also temporarily hide the skip navigation link. Hidden skip links should follow several rules:
- The link should be one of the first focusable elements when navigating with a keyboard.
- The link should be prominently visible when it receives focus.
- The link should provide a clear explanation of its purpose (such as “Skip to content" or “Skip navigation links by pressing enter").
- The text in the link should have appropriate color contrast.
- The link should be visually distinct from the rest of the content to ensure that sighted keyboard users recognize the feature before moving past it.
The Bureau of Internet Accessibility uses temporarily hidden skip links, which appear if a user presses the Tab key after loading a page.
Try reloading this page and pressing Tab. The text “Skip to Content" appears at the top of the page (screen reader users will receive an announcement with the same text). Pressing Enter bypasses the header menu, bringing the reader directly to the content.
Related: Why Consistency is Important to Accessible Design
What does WCAG say about “skip navigation” links?
The Web Content Accessibility Guidelines (WCAG) are the consensus standard for digital accessibility. If you’re considering ways to improve your website’s user experience, WCAG is an essential resource.
WCAG Success Criterion (SC) 2.4.1, “Bypass Blocks,” requires websites to offer some mechanism “to bypass blocks of content that are repeated on multiple web pages.” This is a Level A guideline, which means that websites must follow this success criterion to earn any level of WCAG conformance.
Related: What's The Difference Between WCAG Level A, Level AA, and Level AAA?
When are skip navigation links necessary?
WCAG requires skip navigation links when blocks of content are significantly redundant. As the authors note, “small repeated sections such as individual words, phrases, or single links are not considered blocks for the purposes of this provision.”
However, remember that the goal of digital accessibility is to improve your content for all users. It’s possible to pass WCAG’s requirements while missing opportunities to improve your website’s user experience. Some tips to keep in mind:
- In most scenarios, you’ll only need a single skip navigation link pointing to the main content. Multiple skip navigation links can slow down your users — remember that the purpose is to make navigation faster and easier.
- Consider adding skip links for certain types of non-repetitive content. For example, if you publish a 3,000 word blog with dozens of subheadings, including a table of contents at the beginning of the content can help users find what they need.
- Make sure your skip links operate predictably. For example, “skip to content" should place the user’s focus at the beginning of the content — not after the first subheading.
Adding skip navigation links to your website can improve the experience for people with certain disabilities, and when properly implemented, the links won’t affect the experiences of other users. For more detailed guidance, contact our team to speak with an accessibility expert.
