Skip link

.slate-skip-link. WCAG 2.4.1 Bypass Blocks, Level A: a link to the main content, hidden until it is focused. This page does not render a second instance: every page on this site, including this one, already carries one from slate-astro's Layout, as the first focusable element in the document. Press Tab right now to see it arrive.

What CSS cannot supply is the half that matters: the link has to be the first focusable element in the document, and its href has to name an id that exists.

<a class="slate-skip-link" href="#main">Skip to content</a>
…
<main id="main">

position: fixed, not absolute, so a reader who has scrolled and then pressed Tab is sent to a link at the top of the viewport rather than one that has scrolled off it. :focus, not :focus-visible: an element that is off-screen until focused has to appear for every focus, including one moved by a script, or the reader is left with focus on something they cannot see.