Skip link

Off-screen, in the tab order, first on the page.

The first focusable element on the page. It lets a keyboard or screen-reader user jump straight to the main landmark instead of tabbing through the whole header nav on every page — WCAG 2.4.1, and one of the manual checks on the accessibility floor (ADR 0007).

Off-screen but in the tab order, which is the part that matters:display: none or visibility: hidden would remove it from the tab order and leave a control nobody can reach. On focus it pins itself to the top-left on the action surface, so it is the first thing seen. The target defaults to #main, which Layout renders around the page slot.

Press Tab

The frame below holds a real one. It is invisible until you focus it, which is the only way to see this component work — click into the frame and press Tab.

Tone

The main landmark. Focus lands here when the link is followed.

Props

packages/primitives/src/SkipLink.astro
PropTypeRequired
hrefstring