Accessibility – Skip Links in 2021

Adapted from "Womens Fitness Equipment Skipping Rope" by Jonathan Rolande, original and adapted version both licensed under CC BY 2.0

UPDATE ALERT We liked this article so much that we expanded it, added a whole bunch of example code and published it here on CSS Tricks.

It's 2021, do we really still need skip links? Well, websites still have menus and some people need or prefer to navigate those websites using the keyboard so what are you waiting for, add in that skip link like it's 2009 (well, almost).

Way back in 2005 my colleague at the time Liam McGee and I wrote our first recommended method for adding skip links to websites. Skip links are a way to allow a person who needs or prefers to use the keyboard to navigate a web page get to the main content quickly, without having to wade through a whole bunch of menu items every time. That method was substantially updated in 2009 when WAI-ARIA landmark roles were new and shiny and WebKit based browsers (back then Safari and Chrome) had an intensely annoying bug when it came to page fragments (those in-page links you sometimes see that end in #somethingorother).

This 2009 method developed a bit of a life of its own and ended up on hundreds of websites across the world, and is still in use unchanged on a fair few even today. So, it seemed like now was a good time to revisit the old code and update it for modern times and browsers.

The requirements

The basic requirements for what makes a good skip link are unchanged from 2009:

What has changed substantially since then are the issues that used to make implementing a good skip link so difficult. WebKit (and the Blink fork used in Chrome) fixed the page fragments bug (it used to be that the browser viewport moved when following an in-page link, but the keyboard focus didn't), Internet Explorer is no longer with us so we no longer have to worry about the mysterious "hasLayout" and showing a skiplink to keyboard users while hiding it from mouse users is an awful lot easier since clip-path joined the CSS mainstream. Even WAI-ARIA landmark roles have pretty much had their day, being supplanted by the semantic elements of HTML5 such as <nav>, <main>, and <footer>.

The code for 2021

Here's how we do things in 2021 here at [RPress]

HTML

This is a simplified, minimal version of the HTML code we use on this site.

<!DOCTYPE html>
<html lang="en-GB">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example Skip Link Code for 2021 by [RPress]</title>
</head>   
<body>
    <header>

        <a href="#skip-link" class="text-assistive display-on-focus">Skip to main content.</a>

        <section class="branding">[RPress]</section>
        <nav aria-label="Main menu">
            <a href="https://rpress.io/">Home</a>
            <a href="https://rpress.io/technology">Technology</a>
            <a href="https://rpress.io/articles">Articles</a>
            <a href="https://rpress.io/contact">Contact</a>
        </nav>
    </header>

    <a href="#skip-link" class="text-assistive display-on-focus" id="skip-link">Start of main content.</a>

    <main>
        <h1>Example Skip Link Code for 2021 by [RPress]</h1>
        <p>Here is the main content of the page, including a <a href="/articles/accessibility-skip-links-2021">link to the article on this technique</a> to help demonstrate where the keyboard focus is.</p>
    </main>
    <footer>
        © 2021 [RPress]
    </footer>
</body>
</html>

Skip link

<a href="#skip-link" class="text-assistive display-on-focus">Skip to main content.</a>

This is the skip link itself. It needs to point to the right part of the page (href="#skip-link"), have the classes we'll use to show and hide it as it receives the keyboard focus (class="text-assistive display-on-focus") and contain meaningful text that describes what it does (Skip to main content.). It needs to appear before the main menu, preferably right at the start of the page.

Skip target

<a href="#skip-link" class="text-assistive display-on-focus" id="skip-link">Start of main content.</a>

This is the target for the skip link. It is also a link (linked to itself as it needs a target) so that it can receive the keyboard focus, has the same classes as before for showing/hiding and identifies itself as the target of the skip link (id="skip-link"). As with the skip link, it should contain meaningful text that describes what it does (Start of main content.). It needs to appear right the main content of the page.

Semantic markup

Always use HTML5's semantic markup to help screenreaders (and search engines) make sense of the structure of the page. Particularly important here are use the use of <nav> along with aria-label="Main menu" to mark the main menu and <main>to mark the main content of the page.

CSS

Here's the CSS that we use to show/hide the skip links. the text-assistive class can also be used by itself for other text that you want to be audible to a screenreader user but hidden from fully-sighted users.

.text-assistive {
    box-sizing: border-box;
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}
.text-assistive.display-on-focus:focus {
    -webkit-clip-path: none;
    clip-path: none;
    z-index: 999;
    height: 80px;
    line-height: 80px;
    background: #1295e6;
    font-size: 1.2rem;
    text-decoration: none;
    color: #fff;
    text-align: center;
}
#skip-link:focus {
    background: #084367;
    color: white;
}

Using clip-path along with its prefixed -webkit- version hits the spot for 96.84% of users at time of writing according to the excellent caniuse.com which (in our opinion) is fine for the majority of websites. Should your use case require it, there are a number of other techniques available which are detailed here on WebAIM.

Demo

You can see this technique in action on this website, and if you want a simplified example page then you can find one here.

For aficionados only...

You can find the 2009 article (with linked example code) on the Refined Practice blog here. The original 2005 article from the Communis website is sadly lost.

Tagged: Accessibility Skip Links