How to add a simple "Skip to content"-button to your website

Six months ago I added a "Skip to content"-button for my website. This was shortly after learning that according to Norway's official universal design of ICT that it's required by law for Norwegian websites that you should be able to bypass repeated content. This law is based on WCAG 2.4.1

With HTML/CSS

.skip-to-content {
  position: absolute;
  left: -2000px;
  top: 0px;
}
.skip-to-content:focus {
  left: 0px;
}

And your HTML markup could look like:

<body>
  <a href="#main" class="skip-to-content">Skip to content</a>
  <!-- Rest of website: Header, nav, hero etc. -->
  <main id="main">Hello world!</main>
</body>

Live example.

With Tailwind

If you're using Tailwind:

<body>
  <a href="#main" class="absolute -left-96 focus:left-0 top-0 bg-white">
    Skip to content
  </a>
  <!-- Rest of website: Header, nav, hero etc. -->
  <main id="main">Hello world!</main>
</body>

Live example.

Conclusion

There really isn't anything more to it than that! It's super useful and it can be easy to implement! It's important to note that this button/link has to be the first tabbable item on your page and the easiest way to acheive that is by adding it as the first element in the body.

How to add a simple "Skip to content"-button to your website

With HTML/CSS

With Tailwind

Conclusion

Tagged with

196 words