How to use this component
This component is a link that takes an attribute href="". Within the href="" attribute you enter the id of the targeted location with a #.
This component has been coded to be reusable, meaning there can be more than one skip content link on the page, going to the same or different locations.
This component is suggested to have the class e-reader-only to visually hide it, but still make it accessible to screen readers. For testing purposes we are displaying the link.
Reasons to use this component
Most of the below list is to improve a user's experience on revisits
- To allow to skip the navigation bar and direct a user to the main content
- To allow to skip over long lists/repeated content
- To allow to skip over heavy interactives that can be tedious to have read aloud more than once
- To allow to skip over tables
- To create a "back to top" button
- To create in-page navigation
Component Example
Skip to main content
[Should not have this read by ereader after button has been clicked] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sem laoreet, pulvinar justo vel, pulvinar mauris. Cras ut lorem vel arcu scelerisque viverra a eget magna. Vivamus ac eleifend nulla. Sed convallis magna molestie ullamcorper viverra. Maecenas sit amet erat eget dolor pellentesque maximus eu quis lorem.
Curabitur cursus, ante at viverra cursus
Fusce ac eros sit amet ligula tristique hendrerit nec ac nisi. Morbi ullamcorper, enim id iaculis finibus, purus arcu iaculis diam, eu suscipit orci lacus nec enim. Pellentesque sodales dui ut lorem molestie fringilla. Donec sit amet condimentum libero.
Sed turpis orci
In volutpat convallis mauris, dictum gravida nibh volutpat nec. Proin lorem arcu, dapibus sit amet auctor eget, tincidunt eget tellus. Suspendisse euismod felis et hendrerit faucibus. Mauris efficitur dui ut enim efficitur, eu faucibus nunc venenatis. Proin sed enim libero.
Sed turpis orci
In volutpat convallis mauris, dictum gravida nibh volutpat nec. Proin lorem arcu, dapibus sit amet auctor eget, tincidunt eget tellus. Suspendisse euismod felis et hendrerit faucibus. Mauris efficitur dui ut enim efficitur, eu faucibus nunc venenatis. Proin sed enim libero.
Fake Main Content for Example
Nam tempor, quam eget semper luctus, enim nulla posuere mauris, nec efficitur magna lorem eu massa. Ut ac lacus in ante ullamcorper sollicitudin. Integer pharetra congue nunc in viverra. Maecenas ornare arcu orci, sed porttitor enim faucibus id. Morbi pharetra pretium erat, in volutpat massa tincidunt ut. Praesent maximus, enim non viverra tempor, lacus lacus bibendum lacus, ac imperdiet enim odio eget lacus. Mauris neque mi, facilisis lacinia felis vel, vehicula finibus dolor. Integer elementum tortor nisl, a tempor erat rutrum sed. Quisque lorem velit, scelerisque vitae accumsan eget, porta sit amet enim. Donec aliquet vel metus at mollis. Praesent volutpat dui vel magna tincidunt cursus. Curabitur arcu ligula, bibendum eget velit vel, accumsan tempus nisi. Maecenas et dui ante.
Code Snippets
HTML
<a class="js--skip-content" href="#main-content">Skip to main content</a>
CSS
/* Note:
* The below #id-placement is for example, you can add whatever .is-focused glass to any id you are targetting
============================================= */
#id-placement {
&.is-focused {
box-shadow: 0 0 0 1px blue;
}
}
/* This class should be placed within the globals/_typography.scss file of the project */
.e-reader-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
JS
const skipContent = document.querySelectorAll('.js--skip-content');
var i;
for( i = 0; i < skipContent.length; i++ ) {
skipContent[i].addEventListener('click', function(e){
e.preventDefault();
var skipContentTargetId = e.currentTarget.getAttribute('href');
skipContentTargetId = skipContentTargetId.replace(/\#/g,'');
var skipContentTarget = document.getElementById(skipContentTargetId);
var skipContentTargetOffSet = skipContentTarget.offsetTop - 50;
// check if the body has the animations-paused class to either smooth scroll or straight jump
if( document.body.classList.contains('animations-paused') ) {
scroll({
top: skipContentTargetOffSet,
behavior: "auto"
});
} else {
scroll({
top: skipContentTargetOffSet,
behavior: "smooth"
});
}
skipContentTarget.focus();
skipContentTarget.classList.add('is-focused');
setTimeout( function(){
skipContentTarget.classList.remove('is-focused');
}, 1000 );
});
}