Creating an accessible skip link

Written by NewTrick

07 Jun 2025

#accessibility #front-end

A skipping rope curled on a purple background

If you ever think a website looks professional and well polished, go ahead and visit it from the perspective of a person with vision impairment, low vision, or those who navigate via keyboard. You might find that what seems to be well built becomes a confusing mess.

One of the most impactful ways of testing your site is to switch on voice-to-text and see just how much is thrown at the user as you tab through a page. You will quickly discover how easy it is to frustrate your visitors if the logic of the tab order is out of whack, or if elements lack the correct focus.

Most of all, if your site lacks a skip to main content link, you will find that you have to tab through any top menu items you have, potentially every time you visit a page. If you have multiple items in these menus, you might have to tab a lot. Which is annoying. A skip link allows a user to bypass any links or focusable elements at the top of a page and sets the focus on the main content, which is where you want them to be.

Including this basic feature will also ensure that you are complying with WCAG guidelines.

Skipping, the Drupal way.

Drupal prides itself as being a highly accessible framework, so it is no surprise that you'll find this feature out of the box. You might notice that Drupal does not use display: hidden; or display:none; as there are implications for screen readers. Namely, it won't be picked up.

Instead, here the link is hidden with clip: rect(1px, 1px, 1px, 1px), which creates a small rectangle and overflow: hidden; , which then hides everything outside of that rectangle--so the link itself. The use of clip is deprecated, so in the examples below we'll replace this with clip-path: inset(50%); .

When the element receives focused, a rule set for :focus ensures that the element is seen. That way, we can ensure it functions for sighted and non-sighted users.

Building a skip link

This is a basic implementation for a skip link:

Create an <a> tag as the first element inside your . It will be linked via an id to the your content. Your HTML will look something like this:

<body>
	<a class="screen-reader-skip-to-content" href="#main-content">Skip to main content.</a>
    <header class="site-header">
        <!-- header stuff goes here, like your cool nav menu -->
    </header>
    <main id="main-content">
        <h1>
        	Heading
        </h1>
        <p>
           This is what you want people to be reading!
        </p>
    </main>
 </body>

We need to hide the element normally, but display it when it is focused. So in our CSS, we hide the element when not in focus, but still allow the user to tab to it. Once focus is on, it is visible on the screen:

 .screen-reader-skip-to-content { 
 	border: 0; 
 	clip-path: inset(50%); 
 	height: 1px; 
 	margin: -1px; 
 	overflow: hidden; 
 	padding: 0; 
 	white-space: nowrap; 
 	width: 1px; 
 	position: absolute; 
 	top: 0; 
 	left: 0; 
 } 
 
 .screen-reader-skip-to-content:focus { 
 	clip-path: none; 
 	height: 1rem; 
 	width: auto; 
 	padding: 1rem; 
 	margin: auto; 
 }

And that is it. Simple to implement, but really valuable for your users. Just make sure it finds its way to the template for every page on your website.

Test it on your site by tabbing through the page. Your skip link should be if not the first link, one of the very first.

Skip in error?

I've noticed that some automated accessibility tooling picks this up as an error, because of the location of the <a> tag. Be aware that you might need to explain this to clients who are trying to reach 100% on whatever automated tools they use.

This is another reason why automate accessibility tools are great but they are just a start. Sites should be tested by humans for humans to ensure they work as intended. Hopefully they can be tested by the very people they are intended for.

A skip link is just a simple way we can make our websites a little friendlier for everyone.

Sources:

https://www.a11y-collective.com/blog/skip-to-main-content/

Main image credit:

Photo by Stoica Ionela on Unsplash