Skip to content

2021-02-04 views

Adding a skip link to my Next.js website

Skip links allow keyboard users to easily move into the content of the page without having to repeatedly tab through each navigation link.

My <Page> component houses the main layout for all pages across this site. It includes the primary navigation and wraps the children in a <main> element.

The skip link should be the very first element on the page preceding your primary navigation, and by default is hidden in some fashion.

To do this with Tailwind, I fix position the link to the top left corner of the page and translate it -100% on the Y axis hiding it overscreen. When focused, I remove the transform which slides it into view.

Here is a simplified version of the setup below.

jsx
<a
href="#content"
className="fixed top-0 left-0 transform -translate-y-full focus:translate-y-0"
>
Skip to content
</a>
<nav>...</nav>
<main id="content">...</main>

View the PR on Github.