Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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