Skip to content

Instantly share code, notes, and snippets.

@alkrauss48
Last active August 29, 2015 14:03
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save alkrauss48/dc8e010a59d5e2df1666 to your computer and use it in GitHub Desktop.
Accessibility Jump Menu for Keyboard Users- Use this for every site if you want max accessibility
<body>
<div id="skipmenu">
<a href="#menuArea" class="skippy">Skip directly to menu</a>
<a href="#contentArea" class="skippy">Skip directly to site content</a>
<a href="#footerArea" class="skippy">Skip directly to site footer</a>
</div>
.
.
.
<!-- Use a link like the following to skip to this point -->
<a name="menuArea" tabindex="-1"></a>
a:focus { outline: 1px solid #ffa500!important; }
#skipmenu { position: relative; }
a.skippy {
position: absolute;
top: -1000px;
left: -1000px;
height: 1px;
width: 1px;
text-align: left;
overflow: hidden;
-webkit-user-select: none;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
&:active,
&:focus,
&:hover {
top: 0;
left: 0;
font-size: 1em;
font-weight: 700;
color: #fff;
background-color: #075290;
height: auto;
overflow: auto;
width: 99%;
padding: 5px;
z-index: 100;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment