Skip link
A skip (navigation) link provides a way for users of assistive technology to skip what can often be many navigation links, this is an easy to implement accessibility structure that allows users to have immediate access to pertinent content.
Usage
This should go right after the body tag, (it should be the first thing a keyboard user would tab to on your web page).
The href
links to the relevant content of the page by ID, This is often an ID on the <main>
tag with a href of <main id="main-content>
, in this case the skip link will have a reference of <a href="#main-content">
Multiple skip links are supported if necessary, these links are used for assistive technologies so clear descriptive text should be used, like "Skip Navigation" or "Skip to main content"
skiplink\skiplink-multiple.hbs
<div class="slb-skip">
<a href="#" class="slb-skip-link ">Skip to main content</a>
<a href="#" class="slb-skip-link ">Skip to main navigation</a>
<a href="#" class="slb-skip-link ">Skip to bottom content</a>
</div>
components/_skip-link.scss