Skip to content button

Back to list

Screen reader and keyboard users have to manually tab through everything on a page before they can get to the main content. This gets tedious, so a solution is to include a hidden "Skip to content" button that teleports them straight there as the first thing on your page.

Having the skip link hidden all the time isn't useful to sighted keyboard users though, so we can also add some CSS that makes the link appear only when it's focused on with a keyboard. I got this trick from WebAIM - here, I just added some extra styling to make it look nice and pop down from the top left corner.

Demo

On a computer, go to the top of the page, then press the Tab key.

Code

CSS:

:root {
    \* Replace with your colors *\
    --link:#000;
    --background:#FFF;
}

#skip a {
    position:absolute;
    display:inline-block;
    left:0px;
    top:-1000px;
    overflow:hidden;
    transition:top 0.5s ease;
    background:var(--background);
    color:var(--link);
    z-index:1000;
    padding:5px;
}
 
#skip a:focus {
    top: 0;
    transition:top 0.5s ease;
}

HTML:

As the first element on your page:

<div id="skip"> <a href="#content">Skip to content</a> </div>

Then make sure your content area has the ID "content" (or just any ID at all, then update the link target to match). For example:

<main id="content"> </main>