CSS accessibility classes: .sr-only & .skip-link
Solution
/* Based on https://webaim.org/techniques/css/invisiblecontent/ & https://www.w3schools.com/accessibility/accessibility_skip_links.php */
.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
left: 0;
top: 0;
width: auto;
height: auto;
}
.skip-link:link, .skip-link:visited, .skip-link:hover, .skip-link:active {
color: white; /* Normalise the color */
}<!--
- Put this as the first element within <body> or <header>
- Remember to set <main id="main">
-->
<a class="sr-only skip-link" href="#main">Skip to main content</a>