Skip Link

Recipe 6.6 Allow users to skip elements

Code:

<style>
   .skip-link {
    background-color: #fff;
    position: absolute;
    padding: 0.2em;
    display: block;
  }

   .skip-link:not(:focus):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
  }

   :focus-visible {
    outline: 4px solid #123456;
    outline-offset: 4px;
  }
</style>

<header>
  <a href="#content" class="skip-link">Skip to content</a>
  <button>Header button 1</button>
  <button>Header button 2</button>
  <button>Header button 3</button>
  <button>Header button 4</button>
</header>

<main id="content">
  <button>Main button 1</button>
  <button>Main button 2</button>
  <button>Main button 3</button>
  <button>Main button 4</button>
</main>
Live Demo on CodePen