Accessibility Tips - Skip Links

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?