skip links - no hash - focus

by ian_smithz

HTML

<nav class="skip-nav">
  <ul>
    <li><a href="#site-navigation" tabindex="1">Skip to site navigation</a></li>
    <li><a href="#footer" tabindex="1">Skip to footer</a></li>
  </ul>
</nav>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<nav id="site-navigation" tabindex="0">
  site-navigation site-navigation site-navigation site-navigation site-navigation site-navigation site-navigation
</nav>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<main id="container-main" tabindex="0">
  container-main container main container-main container-main container-main container-main container-main
</main>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<footer id="footer" tabindex="0">
  Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer
</footer>

CSS

.skip-nav li a {
  font-size: 1em;
  line-height: 1;
  background: #ededed;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  font-weight: 700;
  left: -9999px;
  top: 2px;
  padding: .375em;
  position: absolute;
  z-index: 12;
  text-decoration: none;
}

.skip-nav li a:focus {
  left: 50%;
  transform: translateX(-50%);
}

JavaScript

var containerMain = $('#container-main');
    
    if (containerMain.length > 0) {
      $('.skip-nav ul').prepend('<li><a href="#container-main" tabindex="1">Skip to content</a></li>');
    }
    
    $('.skip-nav a').on('click', function(event) {
    	  event.preventDefault();
    	  var skipHash = this.hash;

    	  $('html, body').animate({
    	    scrollTop: $(skipHash).offset().top
    	  }, 500);
    	  
    	  $(skipHash).attr('tabindex', '0')
    	  $(skipHash).focus();
    	  $(skipHash).removeAttr('tabindex', '0');
    });