Keyboard focused skip link

This page includes a hidden skip link that will appear when the keyboard user places focus on it. The mouse user won't know it exists. Try hitting the tab key.

The Code

The CSS includes some styles to make this look more like a tab. Feel free to change the colors and corners.

CSS

.skiplink {
position: absolute;
width: 80%;
top: -300px;
left: 450px;
}


.skiplink a {
position: absolute;
top: 0;
background:#365EBF;
padding:10px 15px;
color:#fff;
text-decoration:none;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
font-size:13px;

}

.skiplink a:focus, .skiplink a:active {
top: 300px;

}

HTML

<div class="skiplink">
  <a href="#main">Skip to main content.</a>
</div>

...

<div id="main" tabindex="-1">

Please note: tabindex="-1" allows this div to receive focus via JavaScript and is required to solve a bug with WebKit-based browsers.

Some sample text to skip over

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus aliquam ipsum et lacus varius scelerisque volutpat ipsum dignissim. Vivamus porttitor accumsan elementum. Quisque turpis urna, cursus ac tempor quis, blandit quis tellus. Aenean lobortis, nunc eu vestibulum interdum, lacus urna luctus augue, eget rhoncus libero lectus pellentesque est. Sed aliquet condimentum augue, eu rutrum dolor scelerisque vel. Praesent condimentum sagittis aliquam. Maecenas luctus accumsan dignissim. Nulla justo ipsum, vehicula quis hendrerit id, lacinia et justo. Aenean lacus justo, dignissim a feugiat sed, rhoncus vitae mauris. Maecenas pulvinar dolor tempor est adipiscing pulvinar eu eleifend libero.

Phasellus tempus, erat ac ornare fermentum, mauris mauris tincidunt justo, sit amet viverra mauris magna quis arcu. Phasellus vitae odio et nulla vehicula placerat. Curabitur sit amet dolor id magna molestie cursus. Maecenas aliquam eros luctus ante mattis ut porta enim auctor. In varius blandit nulla, nec ultrices velit placerat et. Nulla rhoncus risus ac purus scelerisque condimentum. Praesent convallis hendrerit sollicitudin. Suspendisse potenti. Phasellus tincidunt, neque eget interdum accumsan, justo orci elementum mauris, vel vulputate quam justo eget tortor.

Nullam iaculis rutrum tellus, in rhoncus augue facilisis a. In rhoncus sollicitudin augue at adipiscing. Nunc auctor sollicitudin nulla, id aliquet urna condimentum a. Maecenas vel ante at nibh euismod porta eget malesuada mi. Aenean lobortis sem dolor. Proin euismod felis a felis dapibus porta. Curabitur diam purus, cursus eget condimentum et, posuere in lorem. Aliquam dignissim dui ut odio varius eleifend. Phasellus et justo nulla. Ut arcu odio, pellentesque non commodo eu, posuere quis erat. Pellentesque lacinia enim eu odio vestibulum molestie.

Skip down to this header

Webkit browsers have a bug. The user doesn't retain focus in the newly navigated main section. Instead, you may find yourself moving back up the page to the second link instead of continuing in this paragraph. Here's more information on the issue: Why your ‘Skip to Content’ link might not work. The solution is to either wait for WebKit to fix the issue or add the following bit of javaScript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 
 <script>
  $(document).ready(function() {
    // add a click handler to all links 
    // that point to same-page targets (href="#...")		
    $("a[href^='#']").click(function() {
      // get the href attribute of the internal link
      // then strip the first character off it (#)
      // leaving the corresponding id attribute
      $("#"+$(this).attr("href").slice(1)+"")
        // give that id focus (for browsers that didn't already do so)
        .focus()
        // add a highlight effect to that id (comment out if not using)			
        .effect("highlight", {}, 3000);
    });
  });
</script>