Skip to content

Instantly share code, notes, and snippets.

@alex-boom

alex-boom/accessibility.html

Last active May 2, 2018 13:43
Show Gist options
  • Save alex-boom/6d66511e81637fda991c8aa050199cd4 to your computer and use it in GitHub Desktop.
Save alex-boom/6d66511e81637fda991c8aa050199cd4 to your computer and use it in GitHub Desktop.
Download ZIP
accessibility
Raw
accessibility.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.accessibility {
display: inline-block;
position:absolute;
left:-10000px;
top:0;
width:1px;
height:1px;
overflow:hidden;
background-color: green;
color: $white;
padding: 10px;
text-decoration: none;
margin: 10px;
&:focus {
left: 0;
width:auto;
height:auto;
z-index: 1;
}
&.bottom {
&:focus {
bottom: 0;
}
}
}
.accessibility-attention {
font-size: 24px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: white;
padding: 20px 0;
background-color: rgba(red, .5);
border: 2px solid red;
}
</style>
</head>
<body>
<noscript><div class="accessibility-attention">Javascript must be enabled for the correct page display</div></noscript>
<div id="wrapper">
<a class="accessibility" href="#main">Skip to Content</a>
<div id="main"></div>
<div id="footer"></div>
<a class="accessibility bottom" href="#wrapper">Back to top</a>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment