The need for digital accessibility is common knowledge these days. As we strive for a more accessible web experience, one tool stands out for its simplicity and effectiveness: the skiplink. But what exactly is a skiplink, why is it essential, and how do you use it on your website?
What is a skiplink?
A skiplink is a hidden navigation link at the top of a web page that allows users to skip repetitive content and go directly to the main content of the page. It is especially useful for users who rely on screen readers or keyboard navigation: skiplinks prevent them from having to go through the navigation menu again on each page.
Why should I use Skiplinks?
- Improve digital accessibility: Skiplinks are crucial for users with disabilities, providing them with a smoother and more efficient browsing experience. Web visitors who cannot navigate with the mouse, such as people with visual or mobility disabilities, usually use the keyboard to do so. They navigate through a website using the tab key. By using tab and shift + tab, they go to the next or previous link or button on the page. Which element is active (the tab focus), becomes visible because a frame appears around it, called the focus rectangle.
- WCAG 2.2 Guidelines: The use of skiplinks is included in the Web Content Accessibility Guidelines (WCAG) 2.2. Adhering to these guidelines helps make your website more accessible to a wider audience and meets international web accessibility standards.
- SEO benefits: Search engines value accessible websites. Implementing skip links contributes to a more accessible website, and therefore better SEO performance.
How can I implement skiplinks?
Implementing skiplinks is a simple process, but it is important to be precise in order to avoid mistakes and make sure that the skiplinks work effectively. Using the steps below, you can easily introduce skiplinks on your website yourself.
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:
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 this container:
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:
With this CSS code, you initially place the skiplink outside the screen. Once the skiplink gets focus (for example, when a user tabs to it), it will become visible.
Step 4: Test the Skiplink
Finally, test your skiplink to make sure it works correctly. Use a keyboard to navigate through your site and make sure the skiplink appears and works as expected. Also test it with screen readers to confirm that the skiplink provides the intended accessibility benefits.
How's that? Did you manage to implement a Skiplink? If not, don't worry: at GX, we're committed to help you to create accessible and user-friendly web experiences. Contact us to have your Skiplink built.
By the way, how far are you in making your digital environments accessible? Let us run a free Quickscan so you know exactly where you stand. Request a free Quickscan in a meeting with my collegue Stef.
