“Skip links” are important. They allow keyboard-only users, sighted or not, to bypass large or repetitive blocks of content. You may have heard of them and wondered what the big deal is. Or your design team may have refused to implement one because they look “ugly”. But they are important, and they don’t have to break the design.

Many sites have a lot of links at the top of the page. The mega menu isn’t dead! It seems like news websites are particularly bad with this. The Montreal Gazette has over 175 links before reaching the main content. CNN does better, with only 19 links. The Austin Statesman “only” has 18 or so, but the very first link isn’t keyboard-friendly, and it’s the “navigation menu”. The navigation menu has nearly 60 links! Perhaps it’s just as well it’s not keyboard accessible? Stuff has a couple dozen links (and no focus visible - but that’s a story for another day).

All these links before the main content mean that a keyboard-only user has to tab through every single link before they can reach or interact with the main content. This is not a great experience.

Screen reader users are keyboard-only users. Their assistive technology allows them to navigate to different areas of a page, by using landmarks or headings, for example (if they’ve been implemented on the site). But sighted keyboard-only users don’t have that luxury, because browsers don’t (yet?) allow this kind of navigation.

Not just top content

Another area of concern can be social media embeds, such as Twitter feeds. These may have as many as 200 links to tab through before being able to get to the other content.

Compliance

It’s important to make your visitor’s life easier by allowing them to bypass blocks of links. But it’s not just about making their life easier. It’s also about compliance. WCAG success criteria 2.4.1 Bypass Blocks requires this. I generally don’t like to push accessibility from a compliance perspective. But it’s important to note that factor.

The basics

Implementing a skip link is easy. At the most basic, you need:

  1. A link
  2. A destination

Make it simple. Make it clear. Place it very early in the source order. I suggest it as the first link on the page.

<a href="#main-content">Skip to main content</a>

The destination

The destination of the skip link should be the start of your main content. On this site, we use the main landmark. We assign it a unique id, which is the destination of our link.

<main id="main-content">

Making it fancier

A lot of sites display the skip link only when they receive focus. This is a good approach when you have concerns about using real estate space or don’t want to have a significant impact on the site’s design. You can see it in action on this very site! Tab from the address bar and the first link on the page should be “Skip to Main Content.” Keep tabbing and the link disappears.

Note that in order to make sure the link isn’t missed, it needs to have good visual differentiation from the content behind it. Some keyboard users can tab through really quickly. If the link isn’t styled to be easily seen, it’ll be easily missed.

There are many ways to hide the content when it doesn’t have focus. We’ve opted to simply play with opacity. When the link doesn’t have focus, it has an opacity of 0. When it gets focus, it gets opacity of 1.

We added a couple classes to our link to be able to assign CSS:

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

CSS for the un-focused state

.button--skip-link:not(:focus):not(:hover) {
    -webkit-transform: translateY(-4em);
    -ms-transform: translateY(-4em);
    transform: translateY(-4em);
    opacity: 0;
}

Note the transform property gives a nice little effect of animating without it being too jarring.

CSS for the focused state

button:focus,
.button:focus {
    border-color: #062434;
}

button:hover, button:focus,
.button:hover, .button:focus {
    background-color: #08364E;
    text-decoration: none;
    color: #fff;
}

And

.button--skip-link {
    margin: 0 auto;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: 1em;
    width: 10em;
    opacity: 1;
    ...
}

Some things that are unnecessary

Using JavaScript or negative tabindex have been suggested or used elsewhere. Those techniques are unnecessary these days.

Using JavaScript

You may have seen older articles suggesting using JavaScript to help with placing focus on the destination because some browsers moved the visual display to the destination, without moving the focus. This approach is no longer necessary.

Using negative tabindex

You may also have seen the suggestion of putting tabindex=-1 on the destination because some browsers (IE and Chrome) used to not move focus properly. This is also no longer necessary.

Conclusion

Skip links are important. And they are relatively easy to implement. You will improve the user experience for your visitors who rely on the keyboard for navigation. You’ll also comply with WCAG 2.4.1. Bypass Blocks!