Skip-Link: "Zum Inhalt springen" richtig einbauen

Warum das wichtig ist

Wer mit der Maus surft, merkt davon nichts. Wer nur mit der Tastatur arbeitet, etwa wegen einer motorischen Einschränkung, einer Sehnenscheidenentzündung oder weil ein Screenreader läuft, springt mit Tab von Link zu Link. Ohne Skip-Link heißt das: Logo, zwanzig Menüpunkte, Suchfeld, Warenkorb, Sprachauswahl. Und zwar auf jeder Unterseite aufs Neue, bevor der erste Satz Inhalt kommt.

Die WCAG verlangen unter 2.4.1 Blöcke umgehen, dass sich wiederkehrende Bereiche überspringen lassen. Das geht auch über Landmarks und eine saubere Überschriftenstruktur. Diese Wege nutzen aber vor allem Screenreader-Nutzer. Wer ohne Screenreader nur die Tastatur nimmt, hat im Browser keine Taste für "zum Hauptinhalt". Für diese Gruppe ist der Skip-Link das Werkzeug, das im Alltag wirklich hilft.

Ehrlich gesagt: Hat deine Seite nur drei Menüpunkte, ist der Gewinn klein. Schaden tut der Link aber nie, denn er bleibt unsichtbar, bis jemand ihn braucht.

So prüfst du es selbst

Im kostenlosen Check von checkfrei siehst du sofort, ob am Seitenanfang ein Link auf einen Anker wie #main oder #inhalt steht. Fehlt er, gibt es eine Warnung. Ob der Link auch funktioniert, zeigt dir nur der Test mit der Tastatur:

1. 01Ruf deine Seite auf und drück einmal die Tab-Taste, ohne vorher irgendwo hinzuklicken.
2. 02Oben sollte jetzt ein Link wie "Zum Inhalt springen" auftauchen. Landet der Fokus stattdessen auf dem Logo oder dem ersten Menüpunkt, fehlt der Link oder er steht nicht an erster Stelle.
3. 03Drück Enter. Die Seite springt zum Hauptinhalt.
4. 04Drück noch einmal Tab. Der Fokus muss jetzt auf dem ersten Link im Inhalt landen und nicht wieder oben im Menü.

So behebst du es

Du brauchst den Link als erstes Element im <body>, ein Ziel mit passender id und ein paar Zeilen CSS, die den Link verstecken, bis er den Fokus bekommt.

<!-- als erstes Element im body -->
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<header>...</header>
<main id="inhalt" tabindex="-1">
  ...
</main>

<!-- CSS, am besten in deiner Stylesheet-Datei -->
<style>
  .skip-link {
    position: absolute;
    left: 1rem;
    top: -10rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background: #111;
    color: #fff;
  }
  .skip-link:focus {
    top: 1rem;
  }
</style>

export default function RootLayout({ children }) {
  return (
    <html lang="de">
      <body>
        <a className="skip-link" href="#inhalt">Zum Inhalt springen</a>
        <header>...</header>
        <main id="inhalt" tabIndex={-1}>{children}</main>
        <footer>...</footer>
      </body>
    </html>
  );
}

Typische Fehler

• ·Das Ziel existiert nicht. Der Link zeigt auf #main, aber kein Element hat id="main". Oder die id kommt mehrfach vor, dann springt der Browser zur ersten Fundstelle, siehe doppelte IDs.
• ·Ein fest stehender Header verdeckt nach dem Sprung den Anfang des Inhalts. Abhilfe schafft scroll-margin-top am Ziel, zum Beispiel scroll-margin-top: 6rem;.
• ·Der Link ist da, aber nicht das erste fokussierbare Element. Steht davor noch eine Leiste mit Telefonnummer und fünf Social-Media-Symbolen, verliert er seinen Sinn.
• ·Englischer Text auf einer deutschen Seite. "Skip to content" verstehen viele, "Zum Inhalt springen" alle.