Skip Links

Do I need a "skip link"?

Short answer: yes!.

If you've ever had to navigate a web page using a screen reader or a keyboard, you know that it can be a daunting task. Have you ever tried to listen to a screen reader forcing you to listen all the 50+ links of main menu before reaching the main content? Can you imagine the frustration when you find that you're on the wrong page and you need to listen again at the whole menu? For someone with a visual impairment or motor disability, it can be even more challenging. Even for those who like or need to use the keyboard, wouldn't be great to save all this time and keystrokes? That's where skip links come in - a powerful tool in web design and development that can significantly improve the accessibility and usability of your website, allowing users to jump directly to specific sections of a web page, bypassing the repetitive or non-essential content in between.

Implementing skip links is relatively simple. First, you'll need to create the links themselves. These links should be placed at the top of the page, before any other content, and should be visually hidden until they receive focus. The links should also have descriptive text that explains where they will take the user, such as "Skip to main content".

Code example

Here's an example of how to create skip links using HTML and CSS:

phpCopy code<!-- Skip links -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Site navigation -->
<nav id="site-navigation">
  <!-- Site navigation here -->
</nav>

<!-- Main content -->
<main id="main-content">
  <!-- Main content here -->
</main>

In the example above, we have created a single skip link, to jump straight to the main content of the page. We have also added a corresponding anchor point using the id attribute. The skip link itself is visually hidden until it receives focus using CSS:

.skip-link:not(:focus) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link {
  position: static;
  /* add here all your cool styles */
}

The CSS above uses a combination of two pseudo-selectors and the visually-hidden technique (as seen in another article). When a skip link is not focused, it becomes invisible but readable, when focused it takes all the specifications you'll set in the .skip-link class.

That's it? Yep, that's it! So easy that noone could find a reason not to implement them: they don't need any change to the basic layout neither!

Final words

In conclusion, skip links are a powerful tool in web design and development that can significantly improve the accessibility of your website. By allowing users to jump directly to specific sections of a page, you can make your site more user-friendly for those who rely on keyboard navigation or screen readers. So, next time you're designing a website, consider adding skip links to help make it accessible for all users.