The skip link is the very first focusable element on the page so a Tab press from the address bar lands on it before any nav links. The href="#main" jumps focus and scroll to a target with id="main", which is the <main> landmark. Adding tabindex="-1" to <main> makes it programmatically focusable so screen readers actually move focus there (some browsers skip the focus jump otherwise). This combination is the W3C-recommended pattern for skip links.

Using position: absolute; top: -40px; keeps the link off-screen during normal browsing while still leaving it in the accessibility tree (unlike display: none, which removes it entirely). On focus, the link slides into view at the top of the viewport so sighted keyboard users can confirm the action. The visible focus ring (outline) is non-negotiable: removing focus indication breaks WCAG 2.4.7. This pattern is recommended over the older clip and visibility: hidden approaches because it works consistently across screen readers.

Pages with rich layouts (long sidebars, secondary nav, search) benefit from multiple skip targets. Wrapping them in a <nav aria-label="Skip links"> exposes them as a navigation landmark in the accessibility tree, so users can jump straight to the skip-link group. Each target gets tabindex="-1" so the skip actually moves focus. Only show the second and third links on focus too (same CSS as before) to avoid cluttering sighted views, while keyboard users tab through the whole group sequentially.