Skip-Link im HTML
Ein Tabschritt bis zum Inhalt
Erster Tabstopp, Sprungziel, Hauptbereich: drei Stellen im Seitenkopf.
Tastatur-Abkürzung
Der Skip-Link legt eine neue Route durch die Seite.
Ein früher Link überspringt den wiederkehrenden Kopf und setzt die Tabfolge im Inhalt fort.
Jeder Menüpunkt liegt im Weg
Tab, Enter – der Inhalt beginnt
Vier Ankerpunkte
Die Route entsteht in der Dokumentreihenfolge
Der Link steht direkt nach <body>. Sein Fragment verweist auf die eindeutige ID des Hauptbereichs. tabindex="-1" macht main fokussierbar, ohne einen zusätzlichen Tabstopp in den normalen Weg einzubauen.
- 01
<body>Start der Seite - 02
<a href="#inhalt">erster Link - 03
<header> … </header>wird übersprungen - 04
<main id="inhalt">Sprungziel
Link und Ziel verbinden
<body>
<a class="skip-link" href="#inhalt">
Zum Inhalt springen
</a>
<header>
<nav aria-label="Hauptnavigation">…</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Seitentitel</h1>
<p>Einführung in den Inhalt.</p>
<a href="/angebot">Angebot ansehen</a>
</main>
</body>Erst verbergen, bei Fokus zeigen
.skip-link {
position: absolute;
inset-block-start: 1rem;
inset-inline-start: 1rem;
padding: 0.75rem 1rem;
color: var(--ink);
background: var(--paper);
border: 2px solid var(--ink);
transform: translateY(-200%);
}
.skip-link:focus-visible {
z-index: 1000;
transform: translateY(0);
outline: 3px solid var(--one);
outline-offset: 3px;
}
#inhalt {
scroll-margin-block-start: 6rem;
}
#inhalt:focus {
outline: 3px solid var(--one);
outline-offset: 0.5rem;
}Abnahme in drei Zuständen
Prüfen Sie den Weg, nicht nur den Link
- 01 · ErscheinenSeite neu laden und Tab drücken. Der Skip-Link ist der erste sichtbare Fokus.
- 02 · LandenEnter drücken. Inhalt und Fokusziel liegen unter einem festen Seitenkopf frei.
- 03 · WeitergehenNoch einmal Tab drücken. Der erste Link im Inhalt folgt, kein Menüpunkt.
Aus dem Prüfbericht
Ein Befund am Seitenkopf
Prüfen Kein kurzer Weg am Menü vorbei Regel bypass
Ohne Sprunglink, Hauptbereich oder Überschrift führt jeder Tabweg durch das ganze Menü. Ein Skip-Link und ein main legen die Abkürzung an.
Zum Mitnehmen
Der Skip-Link, korrigiert
Ein Link, ein Ziel und eine Regel für den sichtbaren Fokus.
Korrektur in 3 Schritten ansehen
Den Sprunglink an den Seitenanfang setzen
Der Link steht vor allem anderen und zeigt auf den Hauptbereich. Das tabindex von minus eins sorgt dafür, dass der Fokus dort ankommt.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <header> <nav>…</nav> </header> <div class="inhalt">…</div> </body>Nachher
<body> <a class="skip-link" href="#main">Zum Inhalt springen</a> <header> <nav>…</nav> </header> <main id="main" tabindex="-1" class="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu und drücken Sie Tab. Der Link erscheint als Erstes.
Den Link bei Fokus sichtbar machen
Verborgen bleibt der Link nur, solange er keinen Fokus hat. Mit Fokus rutscht er sichtbar an den oberen Seitenrand.
KorrekturvergleichSchritt 2 · CSS Vorher
.skip-link { position: absolute; left: -9999px; }Nachher
.skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Drücken Sie Tab. Der Link wird sichtbar, ein zweiter Tab lässt ihn wieder verschwinden.
Die erste Überschrift nicht verdecken
Ein fester Seitenkopf schiebt sich sonst über den Anfang des Inhalts. Der Abstand hält den Sprungpunkt sichtbar.
KorrekturvergleichSchritt 3 · CSS Vorher
#main { scroll-margin-top: 0; }Nachher
#main { scroll-margin-top: 6rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit dem Link. Die erste Überschrift steht unter dem Kopf, nicht dahinter.