Skip Links, the unsung hero of accessibility. I think to understand why Skip Links are so powerful, we must put ourselves in the shoes of a user that has a disability and has to use a keyboard to navigate websites.
Imagine you visit a website that has 14 navigation items like the one below.
As a user, I decide I want to go to the Culture page so I use the tab
key to get there.
Ok, so now I have reached my destination but in order to get to the content that I am interested in, I need to navigate through all the navigation items again! Surely there is a better way! Can you guess what it is? Skip Links? You are correct!
Let's look at an example of a skip link done well.
The above site is sky news and it gives the user a Skip to content
button that will skip the navigation items.
Some websites take this even further by having multiple skip links, such as Skip to main
& Skip to footer
.
Implement a skip link
How exactly would we implement our own skip link so we can make our website super accessible?
We can break this down into steps:
- add a
keyup
listener to the document - when the
tab
key is pressed and lands on a link then we show our skip link - when the user tabs away or presses the skip link button then we hide it again
Here is a Codepen I created demonstrating this (need to full screen this guy otherwise it looks a little mad!):
Let's first look at the CSS for our skip-link
id.
a#skip-link {
position: absolute;
padding: 10px;
border: 1px solid black;
background: #00aced;
text-decoration: none;
color: #fff;
left: 250px;
top: 10px;
visibility: hidden;
}
So by default we set the visibility
to hidden. The next thing we do is add our JavaScript
let showSkiplink = true;
const skipLink = document.querySelector('#skip-link');
function checkTabPress(e) {
'use strict';
// get a reference to active element
var ele = document.activeElement;
// our boolean showSkipLink is true so we haven't shown it already
if(showSkiplink) {
// if the keycode is tab we are on a a element
if (e.keyCode === 9 && ele.nodeName.toLowerCase() === 'a') {
// show our skip link
skipLink.style.visibility ='visible';
// focus the skip link
skipLink.focus();
// from here on out we don't want to show it
showSkiplink = false;
}
} else {
skipLink.style.visibility ='hidden';
}
}
document.addEventListener('keyup', function (e) {
checkTabPress(e);
}, false);
I have commented the above code well, it is essentially the steps we have listed above. This is a really basic skip link, it has the big problem of not being able to become focused again once tabbed off but this is the core foundation of implementing a skip link.
I will be posting a large article coming up on the LogRocket blog all about accessibility so be sure to follow me on my socials as I will post when it goes live.
I hope you enjoyed this post and it made things clearer for you. I often post what I am working on and content I am producing on my Instagram so be sure to give me a follow. I am trying to post more tech content on Instagram, anyone else fed up with pictures of the gym and food?
Top comments (0)