Skip navigation.

main.html.jade

body
  header
    a#skip-nav(href="#main-content")
    nav
      ...

  #main-content

main.scss

a#skip-nav {
  position: absolute;
  top:-10%;
  left:25%;

  &:active, &:focus, &:hover {
    top: 0;
  }
}

skip-nav.es2015.js

// This script is looking for a link with the id of "skip-nav"
// On click it will force the browser to change focus to the chosen element

// a(href="#whatevIDHere" id="skip-nav")
ready( () => {
  // bind a click event to the 'skip' link
    document.getElementById("skip-nav").addEventListener("click", event => {
      let self = event.srcElement;
      // strip the leading hash and get Element we're skipping to
      let skipTo = document.getElementById(self.href.split('#')[1])
      // Setting 'tabindex' to -1 takes an element out of normal
      // tab flow but allows it to be focused via javascript
      skipTo.setAttribute('tabindex', -1)
      addMultipleListeners(skipTo, 'blur focusout', () => {
        // when focus leaves this element,
        // remove the tabindex attribute
        skipTo.removeAttribute('tabindex');
      }).focus(); // focus on the content container
    });
  }
);


// Jquery like functions

//document.ready(fn)
function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

// on(eventsString, fn)
function addMultipleListeners(element, events, fn) {
  events.split(" ").forEach(event => {
    element.addEventListener(event, fn);
  });
  return element
}