Go Back

2.3. Navigation Shortcuts

Introduction

Many websites have a lot of links at the top of the page before the actual main content.

All these links force th keyboard-only users to tab through every single link before they can reach or interact with the main content. We, as web creators, can make better than that, right?

A common way to bypass this is to create "Skip Navigation Links". The basic concept involves two elements: A trigger and a target.

<!-- Trigger: a link pointing to an #id -->
<a href="#main" class="skipLink">Skip to main content</a>

<!-- Target: A part of the page with the same id -->
<!-- Some browsers will only focus if tabindex="-1" is used -->
<main id="main" tabindex="-1">
  ...
</main>

Making these links always visible can be ugly, so usually these are visually hidden by default and only shown when focused.

.skipLink {
  /* hide visually the link */
  opacity: 0;
  /* make it unreachable by mouse */
  pointer-events: none;
}

.skipLink:focus {
  /* show the link on focus */
  opacity: 1;
}

The visual location of the link doesn't matter much. The key is to make sure the link is one of the first items to be accessed.

Exercise

In the exercise page, let's create some "Skip Navigation" links to jump directly to the main section of the page.

🎯 Goal: Create navigation shortcuts through the page.

Notes