Skip to content

Instantly share code, notes, and snippets.

@aslamdoctor

aslamdoctor/_skip-navigation.scss

Created July 7, 2022 16:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aslamdoctor/1e4615f6ff3bfc2d99c8aba2d4233d84 to your computer and use it in GitHub Desktop.
Save aslamdoctor/1e4615f6ff3bfc2d99c8aba2d4233d84 to your computer and use it in GitHub Desktop.
Download ZIP
WCAG : Skip to Navigation Styling
Raw
_skip-navigation.scss
ul.skip-navigation {
@include reset_ul;
li {
a {
position: absolute;
z-index: 10;
left: 0px;
top: -30px;
color: $black;
display: inline-block;
text-decoration: none;
padding: 5px 7px;
&:focus {
top: 0px;
background-color: #000;
color: #fff;
}
}
}
}
Raw
index.html
<!-- add this after opening <body> tag -->
<ul class="skip-navigation">
<li><a href="#intro">Skip to intro</a></li>
<li><a href="#navigation">Skip to navigation</a></li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment