Skip links
An accessibility primitive that hides until a keyboard user reaches for it. Press Tab on this page — the link above slides into view.
.lsd-skipClick anywhere inside this dashed box, then press Tab. The link slides down from the top edge.
.lsd-skip-listClick the dashed box and press Tab, then arrow through the stack.
.lsd-skip--visible:target · highlightAnchor · real-target
When the link above (or the top-of-page skip link) is activated, focus moves here and the ring pulses once. The host page sets tabindex="-1" on the target so screen readers announce the landing zone.
WCAG 2.4.1 · Bypass BlocksThe WCAG rationale
Sighted users scan a page in milliseconds — keyboard and screen-reader users walk the DOM linearly. Without a skip link, a person on a keyboard tabs through the entire nav, every site, on every page visit.
Success Criterion 2.4.1 (Level A) requires a mechanism to bypass blocks of repeated content. A first-in-DOM skip link satisfies it with zero design cost — visually hidden until focus.
What this primitive guarantees:
- First focusable element in the document order.
- Slides in from the top edge on focus (no opacity-only trick — focus is visible).
- Honours
prefers-reduced-motion— no slide, no transition. - Pairs with
tabindex="-1"on the target so focus moves there after activation. - Outline ring uses
var(--accent)— never removed, neveroutline: none.
Drop the link as the first child of <body>, point its href at the main content's id, and add tabindex="-1" to the target for clean focus handoff.
transform · translate YThe animation lives in .lsd-skip: translate(-50%, -120%) to translate(-50%, 0) on :focus. Reduce-motion users get an instant reveal with no slide.