Accessibility Tips - Skip Links
Tags: a11y, javascript, css
Published: 2020-01-01 19:08:47

---
title: Accessibility Tips - Skip Links
published: true
description: Explaining what skip links are
tags: accessibility, javascript, css 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5mzf9zadwfv292l9tbn8.png
---

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.
![RTE news navigation bar](https://thepracticaldev.s3.amazonaws.com/i/ptb7ru1xfa4ummbe5eew.png)
As a user, I decide I want to go to the Culture page so I use the `tab` key to get there.
![Navigating to the culture page](https://i.gyazo.com/c2237b18911dc96b75435d68c502ef10.gif)

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.
![Skip link on sky news](https://i.gyazo.com/6b31f8dfe8c105c89eefb3bfc98a3a09.gif)
The above site is [sky news](https://news.sky.com/) 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!):
{% codepen https://codepen.io/PaulRyan17/pen/PowJavZ %}

Let's first look at the CSS for our `skip-link` id.
```css
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
```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](https://www.instagram.com/paulryantipp/) 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?