Use skip navigation links
Artem Alekseev
Product Designer | 6+ Years of Experience | Certified Accessibility Tester
In 1998, Jim Thatcher (contributor to WCAG guidelines, and author of one of the first screen readers IBM Screen Reader for DOS, passed away in 2019) pioneered skip links.
The Skip link is the first link that you encounter when using the tab key which allows you to skip navigation, and banners and go to the actual content of the page. This allows screen readers and people who use a keyboard to navigate. Skip nav links are useful for users who use only the keyboard to navigate websites.
You can implement it like this:
<body>
<a href="#main">Skip to main content (Press Enter)</a>
<nav role="navigation">
...
</nav>
<main id="main">
...
</main>
</body>
You can add styles to hide it when not used with the tab key. To not affect your layout you can use absolute positioning. Like this:
.skip_link {
opacity: 0;
top: 0;
margin: 12px 0 12px 0;
position: absolute;
}
.skip_link:focus {
opacity: 1;
}
Resources
#WebAccessibility #SkipLinks #ScreenReaders #WCAG #InclusiveDesign #UX #WebDevelopment #A11y #DigitalAccessibility #WebStandards #AccessibleWeb #UXDesign #WebDesign #InclusiveWebDesign