Skip to content
ctrl+K

Illustration by unDraw.

How to create an Accessible 'Skip to Main' link

A short guide about how to implement a Skip Navigation link, also known as "skip to main" link.

A "skip to main" link, allows users to quickly navigate past repetitive navigation menus and other content to get to the main content of the page, creating a more accessible keyboard navigation experience.

Here's a step-by-step guide on how to implement an accessible "skip to main" link on your website.

The first step is to add the "skip to main" link to your HTML code. You can do this by adding a hyperlink that goes directly to the main content of the page. Here's an example:

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

In this example, the "skip to main" link goes to an anchor with the ID of "main." You'll need to add this anchor to your HTML code as well like below:

<main id="main">
  <!-- Main content goes here -->
</main>

In this example, the main content of the page is wrapped in a <main> tag with the ID of "main." This ID matches the anchor in the "skip to main" link.

The "skip to main" link should be visually hidden by default so that it doesn't interfere with the design of your website. However, it should still be visible to screen readers and other assistive technologies. You can use CSS to achieve this effect:

a[href="#main"] {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: #fff;
  color: #000;
  transform: translateY(-100%);
}

a[href="#main"]:focus {
  transform: translateY(0);
}

In this example, the link is positioned off-screen using the transform property. When the link receives focus, e.g. when a user presses the Tab key to navigate through the page, it moves into view. The link also has good color contrast with a white background and black text to make it easy to see.

Step #3: Test with assistive technologies#

Once you've added the "skip to main" link to your website, it's important to test it with assistive technologies like screen readers to ensure that it's working properly. You can use tools like NVDA (Windows) or VoiceOver (MacOS) to test your website's accessibility.

By following the steps above, you can now create an accessible "skip to main" link that makes it easier for users to navigate your website.

Further reading#