“Skip navigation" links, also known as “skip links,” are an essential accessibility feature that allows users to bypass navigation menus and other repetitive blocks of content.
The most popular content management systems implement skip links automatically. In other words, if you build your website using a WordPress or Adobe Commerce template, you’ve probably got skip links already.
In the vast majority of cases, skip links work perfectly (even if the website owner isn’t aware of them). However, it’s still a good idea to check their implementation.
Who benefits from skip navigation links?
Skip links are important for people who use a keyboard alone (no mouse) to browse the internet. That includes people who use screen readers (software that outputs text as audio or braille) and other assistive technologies.
Keyboard users primarily navigate using the Tab and Shift+Tab commands, which move the keyboard focus up and down the webpage.
If a website has dozens of navigation hyperlinks at the top of every page, you might need to press the Tab key dozens of times to get to the content on each page — which could get frustrating quickly, particularly if you’re going through a multi-page process (such as the checkout process on an eStore).
Skip links usually appear when the user hits Tab for the first time on a new page. The user can press Enter to activate the skip link, bypassing the header menu (or any other repetitive elements that appear throughout the website).
Related: What Is a Skip Link and How Does It Work?
Common Accessibility Mistakes with Skip Links
The Web Content Accessibility Guidelines (WCAG) requires skip links in Success Criterion (SC) 2.4.1, “Bypass Blocks.” Here’s the full text of the requirement:
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
That’s fairly straightforward, but it’s somewhat vague. We’ve seen many implementations of skip links that fulfill WCAG SC 2.4.1, but fail other success criteria.
To determine whether your skip links improve accessibility, test them for these common mistakes:
1. The function of the skip link isn’t immediately obvious.
Per WCAG SC 2.4.4, “Link Purpose (In Context),” all hyperlinks must have link text that explains their purpose. In other words, users should be able to understand exactly what will happen when they activate the link.
If your skip link has vague text — for example, “skip" or “bypass" — some users might not know what to expect.
We recommend using the link text “skip to content,” which is widely used by millions of websites for skip links.
2. The skip link is invisible.
Many websites have functional skip links that are visually hidden until the user presses the Tab key for the first time. That’s totally acceptable — but make sure that hidden skip links become visible when they receive keyboard focus.
Remember, web accessibility isn’t only for people who are blind. Many keyboard users can perceive content visually, and if your skip link doesn’t actually appear on the page, some users won’t be able to find it.
3. Skip links have low-contrast text.
All text content must maintain an appropriate color contrast ratio with its background. Otherwise, text may be unreadable for users with color vision deficiencies and other vision impairments.
This is also applicable to skip links. WCAG SC 1.4.3 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18 points or larger). To learn more about the importance of color contrast, read: The Basics and Importance of Color Contrast for Web Accessibility.
4. The website has too many skip links.
You may have good reasons to add more than one skip link to a page. For example, if you’ve published an article that spans across several pages, you might provide a table of contents at the beginning of each page. You might provide a skip link for your navigation menu, along with a separate skip link to bypass the table of contents.
But remember, keyboard users will need to move past each skip link before they get to the content. Most websites only need one or two skip links; if you add additional skip links, think about how they’ll impact the user experience. Too many skip links defeats the purpose.
Think about keyboard users when building your content
WCAG can help you create a website that works for a wider range of users — but the guidelines are most effective if you use them while building your content, rather than after publication.
That’s especially true for skip links. By testing your website with a keyboard, you can develop a thoughtful approach (and limit the time you spend on accessibility remediations). To learn how to perform basic keyboard accessibility testing, read: Give Yourself an Accessibility Test: Don't Use a Mouse.
For help with a specific accessibility issue, contact our team to speak with an expert.
