Skip link

The main content. The main landmark has the id="main".

This is the first link in the main content.

HTML

<a href="#main" class="skip-link screen-reader-text">
	Jump directly to the content
</a>
			

CSS

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	background-color: #eee;
	color: #333;
	display: block;
	padding: 1em;
}

.skip-link:focus {
	clip: auto;
	clip-path:none;
	height: auto;
	left: 1em;
	top: 1em;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#main[tabindex="-1"]:focus {
	outline: 0;
}

( function() {
  if ( document.getElementById && window.addEventListener ) {
    window.addEventListener( 'hashchange', function() {
      var element = document.getElementById( location.hash.substring( 1 ) );
      if ( element ) {
        if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.nodeName ) ) {
          element.tabIndex = -1;
        }
        element.focus();
       }
    }, false );
  }
} )();