Accessible Skip Navigation component

Table of Contents

• Introduction
• How I added Skip Navigation
• Conclusion

Introduction

Navigating a website should be as straightforward as finding a friend in a crowded room. But what if, instead of weaving through the crowd, you had a direct path to your friend? That is the essence of skip navigation on a website, a simple yet powerful feature that makes online spaces more accessible, especially for keyboard and screen reader users.

To experience this on my website, here is what happens: As soon as the homepage loads, keyboard users can press the Tab key. Instantly, the “Skip navigation” link pops up, inviting them to jump directly to the main content. No need to tab through every menu item; just one action and they are exactly where they want to be.

How I added Skip Navigation

When I first heard about skip navigation, I thought it would involve complex coding. I was wrong. It was surprisingly simple. Here is how I did it:

<p class="skip-navigation">
  <a class="skip-navigation__link" href="#main">Skip navigation</a>
</p>

This link jumps straight to the main section of the page, which I marked with the id="main" attribute.

Initially, this link was always visible, which was not what I wanted. So, I used a bit of CSS to hide the link and only show it when it is active or focused:

.skip-navigation {
  margin: 0;
  background-color: var(--color-background);
  text-align: center;
}

.skip-navigation__link {
  display: inline-block;
  margin: 0.5rem 0;
  outline: none;
  color: var(--color-text);
  text-decoration-line: underline;
}

.skip-navigation__link:not(:active, :focus-visible) {
  position: absolute;
  white-space: nowrap;
  color: transparent;
}

This way, it becomes visible only to keyboard users when they tab into the site. This approach does a few clever things:

• Visibility on demand: The link is invisible until it becomes relevant for keyboard users, maintaining design integrity without sacrificing functionality.
• Accessible: By using CSS variables for colors, the link adheres to the site’s theme, ensuring it is visible against any background.
• Active by default: The link has active styles by default as it is visible only when active; hence outline: none as well.

The skip navigation component is placed right above the header component in the site’s layout. This positioning ensures it is the first thing a keyboard user interacts with. To maintain a clean design, the header component has a z-index: 1, higher than that of the skip navigation link. This setup ensures that when the skip navigation link is not in focus - making it transparent and absolutely positioned so it disappears from the document’s normal flow, without interfering with the site’s visual presentation and usability.

<p class="skip-navigation">
  <a class="skip-navigation__link" href="#main">Skip navigation</a>
</p>
<header>...</header>
<main id="main">...</main>
<footer>...</footer>

.header {
  z-index: 1;
  ...;
}

Conclusion

Adding a skip navigation link was a small effort on my part but made a huge difference in making my site more welcoming to everyone. It reminded me of the power of simplicity and the importance of considering diverse needs when creating digital spaces.

In essence, web accessibility is not just about compliance; it is about hospitality. It is an ongoing journey of learning and improving, one step at a time. By sharing this story, I hope to inspire more website owners to take that step, making the web a friendlier place for everyone.