Skip links are useful accessibility features for those who are using screen readers or navigating with the keyboard.
At some point, most of the developers meet with this solution. I discovered it back in the day when I started to use the _s WordPress starter theme. You can also find it in every official WordPress theme (like the Twenty Twenty).
As usual for the first time, it didn’t make a deep impression on me. I took a note of it then often deleted it because why should I leave this something in my “cool” theme.
Removing or not adding a skip to content navigation is a big deal. It is a big deal because it is such a small effort and can help a lot. Unfortunately, it can still happen to me that I don’t include it.
Bazar is a powerful "headless" e-commerce system. Built on Laravel and Vue.
What Is the Skip to Content Navigation?
The skip navigation is a simple link that navigates the user to a predefined destination, which usually is the main content of the page.
It is the first link in the document, so when we start navigating with the tab key (which is jump through the links and focusable elements), this is the first link we find. By clicking or interacting with it, we can jump over everything (repetitive information) in the header and go to the primary data.
See the Pen
Skip to Content Link by Adam Laki (@adamlaki)
on CodePen.
There is no strict rule about how many of them to include in your HTML document. Usually, with a simple layout, one link to the main element is enough, but it depends (but if you have more than three, try to rethink them). For example, on Google’s result page, we can find three: one is “Skip to main content,” and the other two are navigating us to the accessibility features.
The naming of the link can also differ. Mostly it is “Skip to main content” or “Skip to content.” Name it after the destination. Where the link takes the user on the page?
Why Is It Useful?
The goal of this technique is to remove the unnecessary barrier from the user who is navigation with the keyboard/tab key (has motoring problem) or using a screen reader for some reason (has vision problem).
How to Make One?
Making a skip link is easy; first, we need a link markup in our document with the proper href value. Second, we have to style it as we wish. Third, we need to define the target section.
The most popular pattern is when we only show it on focus; in this why we don’t have to sacrifice the aesthetic but will still be useful for those who need it. One thing we need to pay attention to only hides the link with a technique where the link remain focusable (like with CSS transform).
<a class="skip-link" href="#main">Skip to content</a> <main id="main">Your main content...</main>
.skip-link {
color: #fff;
background: #000;
padding: 0.5rem 1rem;
display: inline-block;
font-weight: 700;
border-radius: 4px;
box-shadow: 0 0 25px rgba(0,0,0,0.2);
position: fixed;
top: -100px;
left: 50%;
transform: translateX(-50%);
z-index: 30;
}
.skip-link:focus {
top: 2rem;
outline: 5px solid rgba(0,0,0,0.1);
}
It is a simple solution, so it will work almost all of the browsers but can be some problem in the legacy ones. Old Internet Explorers forget to set the correct focus if we navigate on the page, so we have to use a little JS.
Summary
Alone, this can’t solve too much, but as always, it is a good start. We need much more like a correct document structure with well-thought headings/landmarks, removed key traps, and so on.
