Subscribe

A11Y 101: Adding skip links

✍️

What are skip links and how do we add them

30 May, 2022 Β· 2 min read

While evaluating my website, I realized while using a screen reader. A user has to tab quite a lot to get to the main content part.

This is quite annoying as this can take you forever, and you might even lose users over this behavior.

Luckily for us, there is a solution to fix this, called skip links.

These are technically hidden links that sit above navigation areas, so people can quickly skip that section.

To illustrate it could look like this:

<a href="#main-content" class="skip-link">Skip navigation</a>
<nav>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Login</a>
</nav>
<main id="main-content">I'm the main content</main>
<footer>
  <a href="#">Privacy</a>
</footer>

This, in general, already works. We can quickly tab and skip the whole navigation section!

It's ugly to have this link sit there, so we can make it visually hidden as we just learned.

In our case, we want to be able to show it on focus, so let's move it outside of the view initially.

.skip-link {
  background: #da0060;
  color: #fff;
  left: 50%;
  padding: 8px;
  position: absolute;
  transform: translate(-50%, -200%);
  transition: transform 0.3s;
}

With this code, we set the skip links element above the top of our page, so it's not visible to users.

We can add a focus selector to animate it into the screen when a user focuses on it using tab navigation.

.skip-link:focus {
  transform: translate(-50%, 0);
}

And when they now tab into this element, it will appear.

I made this super simple demo for you to play with. Try using your tab navigation and interact with the skip element, then tab again.

You are immediately in the footer, right? Now try not to click on the skip link, but keep tabbing. You are now able to visit the menu!

See the Pen Skip links by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next πŸ“–

A11Y 101: Recap

11 Jun, 2022 Β· 2 min read

A11Y 101: Recap

A11Y 101: WAI-ARIA live

10 Jun, 2022 Β· 3 min read

A11Y 101: WAI-ARIA live

Join 1900 devs and subscribe to my newsletter