Skip links

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Skip Links Demo</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <ul class="skip-links">
    <li><a href="#global-nav">Skip to navigation</a></li>
    <li><a href="#main">Skip to content</a></li>
    <li><a href="#footer">Skip to footer</a></li>
  </ul>
  <header role="banner" id="global-nav" tabindex="-1">

  </header>
  <main role="main" id="main" tabindex="-1">
    <h1>Homepage</h1>
    <h2><a href="#">Article Title</a></h2> 
  </main>
  <footer role="contentinfo" id="footer" tabindex="-1">

  </footer>
</body>

</html>

// Code goes here

html, body {
	font-family: Helvetica, sans-serif;
}
.skip-links {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.skip-links li a {
	background-color: #fff;
	display: block;
	left: -600000px;
	padding: 0.5em;
	position: absolute;
}
.skip-links li a:focus {
	left: 0;
}
[tabindex="-1"]:focus {
	//outline: none;
}