Komponente · 6 Varianten
Skip-Link
components/SkipLink.astro
Erster Tab-Stopp: „Zum Inhalt“. Unsichtbar bis Fokus, dann oben links, invers oder mit Kante, Fokus-Ring Oliv.
Notizen
- Bestand: kein Skip-Link in Layouts oder Header.
- WCAG 2.4.1. sr-only + focus:not-sr-only, z toast.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "sichtbar" | "fokus" | "invers" | "mehrere" | "pille" | "im-header" | "sichtbar" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<SkipLink variant="sichtbar" surface="nacht" />02 · Fokus
Erscheint bei Tab
WCAG. sr-only bis Fokus.
Nacht
Zum Inhalt
Tab drücken: Link erscheint oben links.
Paper
Zum Inhalt
Tab drücken: Link erscheint oben links.
04 · Mehrere
Inhalt, Navigation, Fuß
Große Seiten. Reihenfolge = DOM.
Nacht
Paper
05 · Pille
Button-Optik
Button primary. Nur wenn Header Pillen hat.
Nacht
Paper
06 · Im Header
Vor dem Logo
Header. Zeigt die Position.
Nacht
Zum Inhalt Logo · Navigation …
Paper
Zum Inhalt Logo · Navigation …