CSS accessibility classes: .sr-only & .skip-link

/* 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>

Entry

Solution