<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="./src/styles.css" />
  </head>

  <body>
    <a id="skip-link" href="#maincontent">Skip to main content</a>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
      <a href="#">Donate</a>
      <a href="#">Location</a>
      <a href="#">Careers</a>
    </nav>
    <main role="main" id="maincontent">
      This is our great main content
      <button>Follow us on the web</button>
    </main>

    <script src="src/index.js"></script>
  </body>
</html>
body {
  font-family: sans-serif;
  padding: 0 250px;
}

nav {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
  border: 1px solid black;
  padding: 10px;
}

nav a {
  color: #333;
}

main {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  padding: 50px;
}

button {
  padding: 10px;
  background-color: aliceblue;
  border: none;
  margin-top: 250px;
  font-family: cursive;
  font-size: 20spx;
}

a#skip-link {
  position: absolute;
  padding: 10px;
  border: 1px solid black;
  background: #00aced;
  text-decoration: none;
  color: #fff;
  left: 250px;
  top: 10px;
  visibility: hidden;
}
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);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.