Skip to content

Instantly share code, notes, and snippets.

@alkrauss48

alkrauss48/accessibility_skipmenu.html

Last active August 29, 2015 14:03
Show Gist options
  • Save alkrauss48/dc8e010a59d5e2df1666 to your computer and use it in GitHub Desktop.
Save alkrauss48/dc8e010a59d5e2df1666 to your computer and use it in GitHub Desktop.
Download ZIP
Accessibility Jump Menu for Keyboard Users- Use this for every site if you want max accessibility
Raw
accessibility_skipmenu.html
<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>
Raw
accessibility_skipmenu.scss
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