What is a skip link in HTML, and why is tabindex="-1" often added to the element it targets?

## Why the link exists Every page repeats a header, a logo, and a navigation block. A mouse user's eye jumps straight past them; a keyboard user tabs through every one of those links on every page before reaching the content they came for. A skip link gives them a single Tab and Enter to bypass it. WCAG covers this under success criterion 2.4.1, Bypass Blocks, at level A — it is not an optional nicety. ## The markup ```html <body> <a class="skip-link" href="#main">Skip to main content</a> <header> <nav><!-- many links --></nav> </header> <main id="main" tabindex="-1"> <h1>Quarterly report</h1> </main> </body> ``` Two requirements sit in that snippet. The link is the first focusable element in the document, so one press of Tab from a fresh page load reaches it. And the target is a real element with a matching `id` — usually the `<main>` landmark, which is where content genuinely begins. ## Why the target needs tabindex="-1" Activating a fragment link makes the browser scroll the target into view and set the sequential focus navigation starting point there, so the next Tab continues from the target rather than from the link. What it does not reliably do, when the target is not itself focusable, is move focus onto the target. Behaviour has varied between browsers and assistive technologies, and a screen reader's reading cursor may stay in the header even though the viewport scrolled. `tabindex="-1"` closes the gap: the target becomes programmatically focusable, so following the link puts real focus on it. The negative value is deliberate — `tabindex="0"` would add `<main>` as a permanent Tab stop for everyone, which is noise. ## The link must be perceivable when focused A skip link is usually hidden until focused. The one implementation that never works is hiding it with `display: none` or `visibility: hidden`, because that removes it from the tab order entirely — it can never be focused, so it can never reveal itself. The working technique keeps it rendered and moves it out of view, bringing it back on focus; the exact styling is a CSS concern, but the markup consequence is the part to know: the element has to remain focusable at all times. It is also not a screen-reader-only feature. Screen-reader users have landmarks and heading navigation as alternatives; the sighted keyboard user has neither, and they are the person a visible-on-focus skip link serves. ## Variations worth knowing One skip link to `<main>` covers most pages. Some sites add a second to the search field, or a skip-past control for a long embedded widget such as a media player or a data table, where the block being bypassed is inside the content rather than before it. Each needs the same two pieces: a real fragment target and `tabindex="-1"` on it. ## The failures that ship The `href` points at an `id` that no longer exists after a redesign, so the link does nothing. The link sits after the navigation in DOM order and is therefore useless. It is implemented as `href="#"` plus a scroll handler, which moves the viewport but never focus, so tabbing resumes in the header. Or the target is a `<div>` wrapper rather than the landmark, so focus lands somewhere ambiguous. ## Testing it Load the page, press Tab once. The skip link should appear and be readable. Press Enter, then Tab again — the next focus stop must be inside the main content, not back at the top of the navigation. That three-key check catches nearly every broken implementation.