A11Y 101: Adding skip links

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.

What are skip links?

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!

Making skip links better

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!

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