Skip Navigation Links: Avoiding Common Accessibility Mistakes

By admin
“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
ORG

or

Adobe Commerce
ORG

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
ORG

users primarily navigate using the

Tab
PERSON

and

Shift+Tab
NORP

commands, which move the keyboard focus up and down the webpage.

If a website has

dozens
CARDINAL

of navigation hyperlinks at the top of every page, you might need to press the Tab key

dozens
CARDINAL

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
ORDINAL

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
ORG

(

SC
ORG

)

2.4.1
CARDINAL

, “

Bypass Blocks
WORK_OF_ART

.” 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
ORG

, but fail other success criteria.

To determine whether your skip links improve accessibility, test them for these common mistakes:


1
CARDINAL

. The function of the skip link isn’t immediately obvious.

Per WCAG SC

2.4.4
CARDINAL

, “

Link Purpose (In Context
WORK_OF_ART

),” 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
CARDINAL

of websites for skip links.


2
CARDINAL

. 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
ORDINAL

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
CARDINAL

. 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
ORG

requires a contrast ratio of

at least 4.5:1
CARDINAL

for normal text and

3:1
PERSON

for large text (

18
CARDINAL

points or larger). To learn more about the importance of color contrast, read: The Basics and Importance of Color Contrast for Web Accessibility.


4
CARDINAL

. The website has too many skip links.

You may have good reasons to add

more than one
CARDINAL

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
CARDINAL

or

two
CARDINAL

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.