Recently I picked up a Logitech K380 keyboard to be used along with my Macbook Air. And I tried to navigate web pages with keyboard only, and I have to say the experience is so much better for websites that support “Skip to main content” link.
So I feel the urge to add one to my personal site since I’m beginning to dive more into web accessibility stuff.
HTML
It’s obviously that we need to add this link at the beginning of our web page so it is one of the first items accessed by keyboard and screen reader users.
<body>
<a href="#maincontent">Skip to main content</a>
<header></header>
<main id="main-content"></main>
<footer></footer>
</body>Along with smooth scroll bebavior to enhance the experience for sighted people.
html {
scroll-behavior: smooth;
}Next step is to make this link visually hidden until the user navigates to it with a keyboard.
According to Skip Navigation Links on WebAIM, to be usable by all keyboard users, particularly sighted keyboard users, the link must:
- be hidden by default
- be accessible to keyboard navigation
- become prominently visible when it is focused
- properly set focus to the main content area when activated
There are quite a few CSS techniques to visually hide content, techniques for hiding content is an great article you don’t want to skip :)
CSS
We can take advantages of default browser styles when this link is focused by keyboard, by changing the outline-color along with a outline-offset.
.skip-to-content {
position: fixed;
top: 1rem;
left: 1rem;
z-index: -1;
padding-inline: 1.75ch;
padding-block: .75ch;
border-radius: .5ch;
background: var(--accent-color);
color: white;
font-weight: bold;
opacity: 0;
}
.skip-to-content:focus-visible {
outline-color: var(--accent-color, #7044e8);
outline-style: solid;
outline-width: 2px;
outline-offset: 3px;
opacity: 1;
z-index: 999;
}You can try it out on this site by navigating using keyboard.