Skipping the navigation

Speaking of keyboard navigation, it's considered best practice to allow users to skip past a navigation.

Creating a new branch

Once again, we're working on a new feature, so we can create a new branch, similar to how we did before.

Creating the skip to main link

To do this, we need a link as the first focusable element in our page.

<a href="#main-content">Skip to content</a>

/* other content */

<main id="#main-content">...</main>

This can be styled however you like, but we only want it to appear on the page when a user uses the keyboard to navigate to it.

.skip-to-main {
  background: var(--clr-green-500);
  font-size: var(--fs-600);
  padding: 1rem;
  position: absolute;
  top: 1rem;
  left: 1rem;
  border-radius: var(--border-radius-3);
  color: white;
}

.skip-to-main:not(:focus) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}