Skip Navigation Link

Allows users to skip over the main navigation and jump directly to the main content of the page. There's some debate about whether this is neccessary if you use WAI-ARIA landmarks, but current best practice seems to be to use both.

Hide the link unless it is focused with the keyboard with the following css:

.skip-nav {
  position:fixed;
  top:0px;
  bottom:0px;
  height:0;
  width:0;
  overflow:hidden;
}

.skip-nav:focus {
  overflow:visible;
  background:black;
  padding:5px;
  color:white;
  display:block;
  position: static;
  width:100%;
  height:30px;
}

Unfortunately, in some webkit browsers focus is not applied correctly on internal (#hash) links. This means that screen readers don't jump to the correct point when the skip navigation link is clicked/selected with the keyboard. To fix this, use the following javascript polyfill. When an internal link is clicked, the target element is given a tabindex of -1. This means the element can receive focus, but is not part of the normal tab ring for the page. Then, the element is set to have focus, and the screen reader can continue from that point.

Press TAB to see it in action.

Native Javascript

window.addEventListener("hashchange", function(event) {

    var element = document.getElementById(location.hash.substring(1));

    if (element) {

        if (!/^(?:a|select|input|button|textarea)$/i.test(element.tagName)) {
            element.tabIndex = -1;
        }

        element.focus();
    }

}, false);