Skip to content

by gunjan_prmr

HTML

<a href="#content" class="skip">Skip to content</a>

<header>
    <nav role="navigation">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Support</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

<div id="content" role="main">
    <h1>Main Content Starts Here</h1>
    <p>This is a modified example of "Skip Navigation" or "Skip to Content" links. Unlike most common examples, this one actually moves tab focus to the content container.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus, sed error mollitia nostrum minima illum nam aliquam doloremque nulla nesciunt dicta ut aliquid iusto dolorum veniam ea. Illum, ex. <a href="#">Link One.</a></p>

    <h2>Subhead Here</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, minus ad dolores error natus non eos deleniti numquam vero voluptates iste impedit quaerat cupiditate nisi ipsa reiciendis illum minima assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, repellendus ipsam quis sed deserunt soluta ullam modi a dolores odio harum aliquam impedit quisquam commodi consequatur quos suscipit pariatur recusandae. <a href="#">Link Two.</a></p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, minus ad dolores error natus non eos deleniti numquam vero voluptates iste impedit quaerat cupiditate nisi ipsa reiciendis illum minima assumenda <a href="#">Link Three.</a>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil, repellendus ipsam quis sed deserunt soluta ullam modi a dolores odio harum aliquam impedit quisquam commodi consequatur quos suscipit pariatur recusandae.</p>

</div>

CSS

body {
  font-family: Georgia, Times, serif;
  font-size: 19px;
  padding-top: 20px;
}

a:focus,div:focus {
  background-color: yellow;
}

.skip {
  position: absolute;
  top: -1000px;
  left: -1000px;
  height: 1px;
  width: 1px;
  text-align: left;
  overflow: hidden;
}

a.skip:active, 
a.skip:focus, 
a.skip:hover {
  left: 0; 
  top: 0;
  width: auto; 
  height: auto; 
  overflow: visible; 
}

JavaScript

$( document ).ready(function() {
  
  // bind a click event to the 'skip' link
  $(".skip").click(function(event){
    
    // strip the leading hash and declare
    // the content we're skipping to
    var skipTo="#"+this.href.split('#')[1];
    
    // Setting 'tabindex' to -1 takes an element out of normal 
    // tab flow but allows it to be focused via javascript
    $(skipTo).attr('tabindex', -1).on('blur focusout', function () {
      
      // when focus leaves this element, 
      // remove the tabindex attribute
      $(this).removeAttr('tabindex');
      
    }).focus(); // focus on the content container
  });
  
});