Skip Links
Skip links are a common accessibility feature on websites. They are shortcuts to important parts of the webpage that makes it easier and quicker for some users – especially users with disabilities – to find their way around. They care commonly placed before the main navigation menu on the page, but can be used anywhere there is a chunk of content.
Skip links are usually hidden visually by default and appear when users navigate to them using the tab key on their keyboard.
Applicable WCAG 2.1 Success Criteria
-
2.4.1 Bypass Blocks (level A):
A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.
Skip Link
There are multiple approaches to creating skip links, but the main idea is to hide the link from view until it receives keyboard focus. When the link is pressed, focus is moved to the section that is skipped to.
Demo
Skip link using CSS transform to slide link onto page when focused.
Skip to content
Here's a heading and some content! It's important to focus on me.
Content, content, content...lorem ipsum, etc.
Code
<a class="hidden" id="skipLink" href="#demomain">Skip to content</a>
<div id="content">
<nav>
<ul>
<li><a href="#">Main</a></li>
<li><a href="#">Things</a></li>
<li><a href="#">Stuff</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="demomain">
<h1 tabindex="0" id="demoHead">Here's a heading and some content! It's important to focus on me.</h1>
<p>Content, content, content...lorem ipsum, etc.</p>
<button id="demoBtn">Push me</button>
</div>
</div>
*:focus {
border: 2px solid blue;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 500px;
}
a {
color: #333;
text-decoration: none;
padding: 0.5rem;
}
button {
font-size: 1.25rem;
border-radius: 0.33em;
font-family: inherit;
background: #111;
color: #fefefe;
padding: 0.75rem;
border: 0;
text-align: center;
margin-top: 20vh;
margin-left: 25%;
width: 50%;
}
ul {
list-style: none;
margin-top: 0px;
padding-left: 0px;
background-color: lightgreen;
}
ul > li {
font-size: 1.25rem;
font-family: inherit;
color: #000;
padding: 0.75rem;
display: inline-block;
width: 24%;
text-align: center;
margin: 0px;
}
ul > li a {
width: 100%;
}
ul > li:hover {
background-color: aliceblue;
}
ul > li a:focus {
background-color: aliceblue;
}
.hidden {
padding: 0.75rem;
padding-bottom: 1.25rem;
position: absolute;
background: #000;
color: #fff;
left: 50%;
height: 50px;
transform: translateY(-100%);
transition: transform 0.3s;
opacity: 0;
}
.hidden:focus {
transform: translateY(0%);
opacity: 1;
border: 2px solid aliceblue;
}
#content {
height: 400px;
background-color: #009FD4;
}
p {
color: white;
padding-left: 20px;
}
document.getElementById('skipLink').addEventListener('click', function(e) {
e.preventDefault();
var target = demo.getElementById('demoHead');
target.focus();
});
