Improving accessibility with a skip-link

Allow jumping straight to the main content skipping the long navigation

Introduction

Accessibility is hard. You have to find the right balance between helping and not obstructing the browser defaults. When surfing a well structured page with a screenreader or the tab key you mostly start at the navigation. But what if the navigation is really long with a lot of links. That's a lot of tabbing. We can solve this with a simple 'skip-link'.

Our layout

Lets us this simple layout as our starting point.

html

<div class="layout">
  <header>
    <nav title="Header Navigation">
      <a href="#"> Link 1 </a>
      <a href="#"> Link 2 </a>
      <a href="#"> Link 3 </a>
      <a href="#"> Link 4 </a>
      <a href="#"> Link 5 </a>
      <a href="#"> Link 6 </a>
    </nav>
  </header>

  <main>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </p>
  </main>
</div>

css

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

header {
  position: relative;
  display: flex;
  justify-content: center;
  border: 4px solid black;
}

nav {
  display: flex;
  gap: 40px;
}

main {
  border: 4px solid black;
  height: 100vh;
}

When you see this layout you'll notice that the header navigation has 6 links. When somebody is using a screenreader or keyboard to navigate your site, they're forced to go through all of the links first.

Skip links

We can prevent this by giving an option before entering the nav to go straight to the main content.

We give the main element an id of 'main-content'. Then we add a anchor tag to the html before the nav element with the href of 'main-content' and a class of 'skip-link'. Finally we style this anchor tag to only show when we focus it.

html

<div class="layout">
  <header>
    <a href="#main-content" class="skip-link"> To the main content </a>
    <nav title="Header Navigation">
      <a href="#"> Link 1 </a>
      <a href="#"> Link 2 </a>
      <a href="#"> Link 3 </a>
      <a href="#"> Link 4 </a>
      <a href="#"> Link 5 </a>
      <a href="#"> Link 6 </a>
    </nav>
  </header>

  <main id="main-content">
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry's standard dummy text ever since the
      1500s, when an unknown printer took a galley of type and scrambled it to
      make a type specimen book. It has survived not only five centuries, but
      also the leap into electronic typesetting, remaining essentially
      unchanged. It was popularised in the 1960s with the release of Letraset
      sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem
      Ipsum.
    </p>
  </main>
</div>

css

.layout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

header {
  position: relative;
  display: flex;
  justify-content: center;
  border: 4px solid black;
}

nav {
  display: flex;
  gap: 40px;
}

main {
  border: 4px solid black;
  height: 100vh;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -50px;
}

.skip-link:focus {
  top: 0;
}

Test the final result.

See the Pen poEBVMG by Marten West (@martenwest) on CodePen.

Conclusion

With only an id on the main element and an added anchor tag we're able to give the user the chance to skip the navigation and to jump straight to the main content. These small things add up quick to make your site a little more accessible and enjoyable to surf.