Skip links (also referred to as skip navigation links) are an important accessibility feature required by the Web Content Accessibility Guidelines (WCAG). The links allow users to bypass repetitive content, which is especially useful for individuals who browse the internet with screen readers and other assistive technologies.
For a quick example of a skip link, reload this blog and press the Tab key. Your keyboard focus will move to a hyperlink that reads “Skip to Content.” By pressing enter, you can bypass our header menu and start navigating through the content.
You’ll find skip links on most websites (and if you’ve built your website using a template on WordPress or another content management system, there’s a good chance your site has this feature).
Does every website need “skip to content" links?
If your website doesn’t contain skip links, you might violate WCAG 2.1 Success Criterion 2.4.1, “Bypass Blocks,” which requires that websites provide a mechanism for bypassing repeated blocks of content.
SC 2.4.1 specifically applies to “blocks of content that are repeated on multiple web pages.” WCAG strongly encourages bypass-block mechanisms on single-page websites, but does not explicitly require them.
However, you should still provide skip links when they make sense — even if your website is only one page.
For example, let’s say you’re building a landing page for a marketing campaign. Your landing page contains a dozen user testimonials, a few pages of sales content, and a form for collecting leads. You want your users to read the content, then fill out the form.
However, keyboard users must tab through every testimonial before they read the content. This isn’t a great experience for those users, and a skip link would greatly increase your chances of conversions. More importantly, you’d make a better first impression on these potential customers.
Remember, the goal of digital accessibility is to make the internet more useful for real people. Repetitive content can be frustrating for people who use keyboards alone for navigation, which is a sizable part of your audience. Providing a skip link addresses an accessibility barrier, and it’s usually a quick, easy fix.
Related: How "Skip Navigation" Links Benefit Accessibility
Tips for Incorporating Skip Links
It’s important to note that other techniques can also provide users with ways to skip repetitive content. For example, subheadings and other semantic HTML elements can identify the different regions of your content.
ARIA (Accessible Rich Internet Applications) landmarks can also identify regions of the page. Because ARIA support varies from one assistive tool to the next, semantic HTML is usually preferable.
Even so, skip navigation links are usually the simplest solution. If you’re concerned that adding the links will affect your website’s visual presentation, you can hide them until the user needs them. Use CSS to hide the link offscreen, then make it visible when the user presses the Tab key.
A few simple rules to keep in mind:
- Do not use the CSS hidden or display:none attribute, as these will remove the link from keyboard navigation.
- When the skip link receives keyboard focus, it should be visually distinct from the rest of the content. This helps sighted keyboard users identify it without accidentally scanning past it.
- In addition to skip links, make sure your website is properly structured with subheading tags and other semantic HTML. Write descriptive headings so that readers can find relevant content easily.
- Skip links must change the actual focus, not just the apparent, visual focus. Otherwise, when the user presses Tab again to move to the next section of your content, they’ll move back to the beginning of the content.
- In most cases, you should only use a single skip navigation link for each webpage. However, you might decide to add additional links if your site contains long lists (for example, links to your company’s addresses in all 50 states) or other content that users may need to bypass.
Finally, make sure your skip links appear before header menus and other blocks of repeated content. If your reader needs to press Tab a dozen times before they can activate the skip link, the skip link isn’t serving its purpose.
To learn more about digital accessibility, download our Essential Guide to ADA Compliance for Websites or send us a message to connect with our accessibility experts.
