Awesome Accessibility Navigation

access.html

<!-- ACCESSIBILITY NAVIGATION -->
<div class="access">
	<h1 id="top">Welcome to the University Website</h1>
	<h2>Accessibility Navigation:</h2>
	<ul>
		<li><a href="#primary-navigation" title="Skip to the primary site navigation" class="skip">Skip to the primary site navigation</a></li>
		<li><a href="#main" title="Skip to the main content" class="skip">Skip to the main content</a></li>
		<li><a href="#footer" title="Skip to the footer" class="skip">Skip to the footer</a></li>
	</ul>
</div><!-- /access -->

access.js

// Needs jQuery

$('.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
  
});

access.scss

.access {
	h1,
	h2,
	p,
	.back-to-top {
		@extend .visuallyhidden;
	}
	ul {
		margin: 0;
		padding: 0;
		display: inline;
	}
	li {
		display: inline;
	}
}

.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;
	z-index: 1000;
	background-color: $white;
	color: $black;
	border-radius: 0 0 4px 0;
	padding: 4px;
}