Accessibility Tip: What are skip links and why they are important for accessibility

Last updated on January 01, 2022A11y issues

Add skip links so keyboard users can easily go straight to the main content, avoiding having to tab through all of the navigation or header area.

When sites implement skip links you can load up a page, and hopefully press tab only once or twice before you see a button appear that lets you ‘skip to content’. Clicking enter to open that link will mean you can skip tabbing through all of the header and navigation items.

This benefits users who use keyboard input, screen readers or other assistive technologies.

There are three main parts - the button itself, the CSS to hide it by default (but show it once tabbed (focused) to), and an anchor for the main content.

Adding the button

Add a button near the top of the HTML. Note there is no standard way to do this (so you can change the class from .skip-link, or change the href from #maincontent to whatever anchor you want.

<a class="skip-link" href="#maincontent">
    Skip to main content

Add CSS to hide the button by default, but show it when it is focused

Here is some sample css that you apply to hide the skip link button by default, but once it is focused it will appear on the page.

.skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    display: block;
    height: 1px;
    left: 100px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    z-index: 9999;

.skip-link:focus {
    clip: auto;
    height: auto;
    overflow: visible;
    width: auto;

Add the maincontent anchor

This can be any anchor you want - just make sure you link to it on the button

<main id="maincontent"> (your content here) </main>


Success Criterion 2.4.1: Bypass Blocks

Success Criterion 2.4.1 Bypass Blocks (Level A): A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Found this post useful?

Please consider sharing this link with your work colleagues or on social media. There are no ads on my site, I just want to promote accessibility.

Found an issue? please point them out - let me know if there is a mistake and I'll update it

Follow me on Twitter: @A11yForDevs. I post links to interesting a11y articles and resources.

More posts

Welcome to Accessibility for Developers

New to accessibility?

Accessibility for Developers

This is a free site to give advice on how to make your website accessible

I have been a software developer for nearly a couple of decades, and really want to help promote better accessibility in apps and websites that we, as developers, create! Accessibility isn't very difficult, it is just important to be aware about it and understand it.

If you spot any mistakes or have any suggestions, ideas or collaborations please check out my contact page.

Important: The information on this website is for general informational purposes only. I make no representation or warranty, express or implied. Your use of the site is solely at your own risk. I've tried my best to make sure all information is accurate, but I am just a software engineer (not an accessibility expert).