---
title: This is how you make a Skiplink for your website
description: Learn how to add a skiplink to your website to improve digital accessibility, comply with WCAG 2.2, and enhance your SEO performance.
image: https://www.gxsoftware.com/hubfs/Skipping%20stones.png
---
Go to main content
Open the navigation menu Close the navigation menu
- [English](https://www.gxsoftware.com/en/blog/this-is-how-you-make-a-skiplink-for-your-website)
- [Nederlands](https://www.gxsoftware.com/nl/blog/zo-zet-je-skiplinks-in-op-je-website)
# This is how you make a Skiplink for your website
 Maatje van Broeckhuysen
The importance of **digital accessibility** is widely recognized today. As we aim to create more accessible web experiences, one simple yet effective tool stands out: the **skiplink**. But what exactly is a skiplink, why is it important, and how do you implement it on your website?
## What is a skiplink?
A skiplink is a hidden navigation link at the top of a webpage that allows users to bypass repetitive content and go directly to the main section of the page. Skiplinks are especially helpful for users who rely on screen readers or keyboard navigation, preventing them from having to tab through the entire navigation menu on every page.
## Why should I use Skiplinks?
1. **Improve digital accessibility:** Skiplinks provide a smoother browsing experience for users with disabilities. People who cannot use a mouse — such as those with visual or mobility impairments — rely on the keyboard to navigate. By using Tab and Shift + Tab, they move between interactive elements. Skiplinks ensure they can quickly access the main content.
2. **Compliance with [WCAG 2.2](https://www.gxsoftware.com/en/blog/wcag-2.2-whats-new):** Skiplinks are recommended in the Web Content Accessibility Guidelines (WCAG) 2.2. Following these guidelines makes your website accessible to a wider audience and helps you meet international accessibility standards.
3. **SEO benefits:** Search engines favor accessible websites. Implementing skiplinks improves your site’s accessibility and can positively impact SEO performance.
## How can I implement skiplinks?
Adding a skiplink is straightforward but requires attention to detail. Follow these steps to implement them correctly:
**Step 1: Add the Skiplink to your HTML**
The first step is to add the skip link to your HTML code. Place it at the top of the body content of your web page, as high as possible. Here is a simple example:
Skip to main content
**Step 2: Define the main content area**
Next, define the part of your page where the main content begins. This is where the skiplink will send users. Add an ID to the container that holds the main content:
```
```
**Step 3: Style the Skiplink**
To ensure that the skiplink is visible only when needed (for example, when a user navigates with the keyboard), you use CSS code. Here is an example of how to setup skiplink styling through CSS:
.skiplink {
position: absolute;
top: -9999px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
z-index: 100;
}
.skiplink:focus {
top: 0;
}
This places the link off-screen initially. When a user tabs to it, the skiplink becomes visible.
**Step 4: Test the Skiplink**
Test your skiplink using a keyboard to ensure it appears and works correctly. Check it with screen readers to confirm that it provides the intended accessibility benefits.
#### Need Help?
Did you manage to implement a skiplink? If not, don’t worry. At GX, we are committed to helping you create accessible and user-friendly web experiences.
[Contact us to have your skiplink built efficiently and correctly.](mailto:menno.faassen@gxsoftware.com)
## You might also find these blogs interesting
1. 
- Compliance
### WCAG 2.2: What’s new?
*Eric van der Vlugt*
[Read this blog](https://www.gxsoftware.com/en/blog/wcag-2.2-whats-new)
2. 
- Compliance
### The European Accessibility Act 2025: What It Means for Your Business
*Eric van der Vlugt*
[Read this blog](https://www.gxsoftware.com/en/blog/the-european-accessibility-act-2025)
3. 
- Compliance
- Web & App Development
### How do you keep your online channels digitally accessible?
*Dirk Sanders*
[Read this blog](https://www.gxsoftware.com/en/blog/how-do-you-keep-your-online-channels-digitally-accessible)
4. 
- Compliance
### Data sovereignty: take control of your data
*Dirk Sanders*
[Read this blog](https://www.gxsoftware.com/en/blog/data-sovereignty-take-control-of-your-data)
### **Make Digital** *Personal*
-
-
-
-
### Subscribe to our newsletter
- [Contact](https://www.gxsoftware.com/en/contact)
- [Cookies](https://www.gxsoftware.com/en/cookies)
- [Privacy Policy](https://www.gxsoftware.com/en/privacy)
- [Terms & Conditions](https://www.gxsoftware.com/en/terms)
©2025 GX Software