Provide a way to bypass repeating content (skip link)

Illustration of a skip link on a website
Image description: A website with a logo, top navigation, and a left side panel. To the right of the logo is a link that says, "Skip to main content" highlighted in light green, with a light green rectangle below symbolizing content that it’s skipping to.

This page is in progress -

If you would like to contribute or make a case to prioritize this page, please fill out the form below.

Why This is Important

A skip link allows screen reader and keyboard users to skip navigation and go to the main content.

Blind and visually impaired people use screen readers to interact with websites and apps. A screen reader is a type of assistive tech that converts text, buttons, and other screen elements to audio and/or braille. If you are new to screen readers, I recommend watching a video to learn how it works.

Many people may prefer or exclusively use keyboards. This includes people with motor disabilities, who may have difficulty with a mouse or touch screen, and Blind and visually impaired people who use the keyboard paired with a screen reader.

For these users, having to tab through repeating content (such as the navigation) on every single page gets very tedious. A skip link is the most common solution to provide a way to skip past the navigation so that they can quickly access the main content.

This references WCAG criterion 2.4.1 Bypass Blocks (Level A).

How to Implement This

Skip link

The skip link is usually invisible until the focus moves onto it. By pressing enter on the skip link, the user can skip past the navigation to the main content. To see an example, click on the url of this website and press tab.

Depending on what the content is and if there are multiple locations the user would want to skip to, there can be multiple skip links, such as skip to second menu, skip to content, etc.

Use CSS in order to hide the skip link and make it visible only on focus.

HTML code snippet:

<a href="#main" class="visible-on-focus">Skip to main content</a>


CSS code snippet:

.visible-on-focus {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}


.visible-on-focus:active,
.visible-on-focus:focus {
position: relative;
width: auto;
height: auto;
left: auto;
}

While it's an option to keep the skip link visible at all times, this tends to make the webpage header more cluttered and is potentially confusing.

Interesting further reading

The following websites all have great examples of skip links. Some are more noticeable while others are more subtle. Change tab focus from the web address and then the skip link will appear.

How to Test This

This requires manual testing. Tab focus from the web address to the page and see if a skip link appears.

On mobile, check for the skip link using the device screen reader.


Credits

No credits yet. But this could be you!

Code snippets written by Michellanne Li.

Contribute and Give Feedback

If you would like to provide feedback or contribute content on this resource, please fill out the form below.

Thank you, your submission has been received!
Oops! Something went wrong while submitting the form. Please check your internet connection and try again.

If you continue to encounter issues, please reach out to alexyingchen(at)gmail.com.