How to Create a Skip Link For Webflow and Standard Websites
In this post, we'll guide you through the step-by-step process of integrating an accessibility Skip Link into your website, with a special focus on integration inta a Webflow website (like this one!).
A Skip Link is simply a navigational element that lets users hop past a chunk of content on a webpage.
An Accessibility Skip Link (also referred to as a bypass block) lets screen reader users bypass global elements that are repeated on multiple pages of a website -- such as the site logo, navigation menu or site search function -- and jump straight to a page’s main content.
Cantilever integrates skip links into the sites we develop not only to ensure WCAG compliance, but also the best possible experience for all visitors to a website.
You can learn more about the WCAG guidelines for skip links by reviewing their successes criterion.
Screen Reader UX
Screen readers convert webpage content into synthetic speech or braille output, helping visually impaired users navigate digital environments. They process content linearly, moving from top to bottom, reading out content within elements like headings, links, forms, and image alt text.
For instance, when a screen reader user navigates through Cantilever’s site menu, they hear:
“Link, Case Studies”
“Link, About”
“Link, Resources”
And so on.
Now imagine having to listen to this sequence every single time you visit a new page, just to reach the actual content. This tedious experience can be easily improved by implementing a Skip Link.
Tip: Want to understand how your website performs for screen reader users? Try SilkTide's Chrome extension for a quick emulator experience. For a deeper dive, Windows users can explore NVDA (free screen reader), while Mac users can activate VoiceOver directly from their OS settings.
How Skip Links Work
Accessibility Skip Links are typically hidden from view when a page loads, and appear only when they gain focus. You can find one (hidden from view) on our site by opening DevTools (Command+Option+C on Mac, Control+Shift+C on PC).
To see a Skip Link in action, instead of clicking a navigational element when a page first loads, tap your keyboard’s Tab key. You’ll navigate to the first interactive element (which should be a Skip Link) and trigger CSS that brings it into view.
The accessibility Skip Link is an <a> tag. To provide optimal benefit to users, it must be placed as the first interactive element on the page.
The link works by targeting the ID of the first significant chunk of content that appears on your webpage after the <header> element. When the link is clicked (or when a person navigating by keyboard hits Enter or Return while the Skip Link is in focus), the webpage scrolls to the main content element (usually a <main> element).
Best Practice: Keep Skip Links visually hidden but accessible to screen readers. Use CSS to reveal them only when in focus, ensuring they don't disrupt the design while remaining functional.
How to Create a Skip Link in Webflow
The Webflow Skip Link solution we present here uses a combination of CSS and JavaScript. It's benefit is that the Skip Link you implement will work on every existing and future page of your website, regardless of the ID that you apply to the main content element.
If you use the same ID value for the main content container on every page of the website, you can implement a CSS-only method, which is described in the next section of the blog post. This method is typicaly what we use on non-Webflow websites.
Since Webflow does not provide direct access to a page's underlying HTML, the process for adding a Skip Link to a Webflow website is different than when working in HTML.
Step 1: Create the Skip Link
Within the navbar element, which is usually placed at or near the very top of your webpage, add a link element. Make sure it's the first child element within the header. This placement ensures that the Skip Link becomes the page's first interactive element.
Give your new link an ID. We'll use skip-to-main for this example, but you can choose any descriptive ID. Then, set the link text to the prompt you would like users to receive. For example, "Skip to Main Content" or "Skip Navigation."
Step 2: Identify the Target Content Area
Now we need to set the Skip Link's target to the main content section of your webpage.
Give this element an ID value. In our example, we set the ID to main.
Step 3: Add custom CSS to hide the Skip Link
Skip Links are most commonly hidden until they receive focus (i.e. when a person navigating with a keyboard hits their Tab key). The following CSS accomplishes by moving the link outside of the viewable viewport except for when it's in focus.
Add this CSS as a <style> element to your Webflow project in the <head> or within the webpage:
/* Hide skip button */
a.skip-to-main:not(:focus) {
left: -1000px !important;
}
Apply visual styles with a second class, which keeps your CSS object-orientated. In the following example, we use position: absolute within our button-link class to place the link relative to other site header content.
.skip-to-main.button-link {
z-index: 100;
background-color: #000;
color: #FFF;
letter-spacing: .045em;
text-transform: uppercase;
border-radius: 32px;
margin-left: 0;
padding: 1rem 1.75rem;
font-size: 1rem;
font-weight: 700;
line-height: 1;
transition: all .25s;
position: absolute;
top: 10px;
left: 10px;
box-shadow: 0 18px 48px #00000059;
}
Next, make sure the .skip-to-main class has been added to the the Skip Link link element.
Step 4: Add the JavaScript
Finally, we add a JavaScript snippet to the site to future-proof the Skip Link's functionality.
Navigate to your Webflow project's settings, and then to the Custom Code tab:
In the Footer Code section, add the following script:
<script>
document.getElementById("skip-to-main").addEventListener("click", (e) => {
e.preventDefault();
const target = document.getElementById("main");
target.setAttribute("tabindex", "-1");
target.focus();
});
</script>
What this script does:
e.preventDefault();: Prevents the default link behavior (jumping to the target with a jarring page scroll).target.setAttribute('tabindex', '-1');: This temporarily makes the target element focusable. The tabindex="-1" attribute allows the element to receive focus via JavaScript, but doesn't add it to the natural tab order.target.focus();: Programmatically sets the focus to the target element.
IMPORTANT: If you’ve used a differentIDvalue for your Skip Link or target element, update thegetElementById()values accordingly for the script to function. The snippet's first instance of thegetElementById()method is for the Skip Link element, while the second is for the target element.
Test your Skip Link
Now it's time to test your skip link's function. Publish the site and then bring up a page in your browser. Use your keyboard to navigate the page by pressing your Tab key. The skip link should now become visible! Once it is, press your Enter or Return key, and your target container (i.e. the page's main block of content) should scroll into view.
How To Create a Skip Link on a Non-Webflow Website
As described previously, the accessibility Skip Link is an <a> tag, and to provide optimal benefit to users it must be placed as the first interactive element on the page.
First, create the link and place it after the opening <body> tag, either before the first <header> tag or as the first element within the header container:
<a class="skip-to-main" href="#main">Skip to main content</a>
We want to hide the link and make it viewable only when in focus, so add the following to your global CSS file:
.skip-to-main {
position: absolute;
top: 1rem
left: 1rem;
transform: translateX(-500px);
}
We’ve assigned position: absolute and used transform to move the link well outside the visible viewport, ensuring that the user cannot inadvertently click or tap on it while browsing the page.
Now we need a plan for keyboard navigation, which is accomplished using the Tab key. The Tab key linearly brings each interactive element on a webpage into focus.
We’ve positioned the Skip Link as the first interactive element, and now need to target its :focus state so it's brought into view while the link is in focus:
.skip-to-main:focus { transform: translateX(0px); }
As soon as focus shifts to a different element, this CSS no longer applies and the Skip Link again shifts off-screen.
Apply visual styles with a second class, which keeps your CSS object-orientated. We’ll do this now by adding a button-link class:
.skip-to-main.button-link {
z-index: 100;
background-color: #000;
color: #FFF;
letter-spacing: .045em;
text-transform: uppercase;
border-radius: 32px;
margin-left: 0;
padding: 1rem 1.75rem;
font-size: 1rem;
font-weight: 700;
line-height: 1;
transition: all .25s;
position: absolute;
top: 10px;
left: 10px;
box-shadow: 0 18px 48px #00000059;
}
In this example, we’ve used position: absolute to place the link relative to other site header content.
Finally, notice that our link’s href value is #main, which corresponds to the ID value of the page’s main content container. When the user clicks the Skip Link, the page auto-scrolls to the main content with ID=“main”.
Test your Skip Link
Now it's time to test your Skip Link's function. View the site and use your keyboard to navigate the page by pressing your Tab key. The Skip Link should be brought into focus, which applies the CSS rules we created. Once it is, press your Enter or Return key, and your target container (i.e. the page's main block of content) should scroll into view.
Why Skip Links Matter:
Implementing an accessibility Skip Link helps to make your website more intuitive, inclusive, and user-friendly. Adding this small but impactful feature improves navigation for all keyboard users, especially those relying on assistive technologies.
Make your website work for you
Get top dev and accessibility tips delivered directly to your inbox for a more impactful online presence.
We create & maintain websites that get results. If your website is important for your business, you need a dedicated team of experts taking care of it: Cantilever.
learn more about us
