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?