Skiplinks richtig umsetzen:

Warum `tabindex="-1"` den Unterschied macht

Skiplinks sind eines dieser kleinen Details, die man schnell „irgendwie“ einbaut – und dann wundert man sich, warum das Ganze für Tastaturnutzer und Screenreader doch nicht so rund funktioniert.
In diesem Artikel schauen wir uns Schritt für Schritt an, wie du einen Skiplink sauber umsetzt, warum der Zielbereich tabindex="-1" bekommen sollte und wo typische Stolperfallen liegen.

Was ist ein Skiplink – und wofür brauche ich ihn?

Ein Skiplink (oft „Zum Inhalt springen“) ist ein unsichtbarer Link am Anfang der Seite, der Nutzer direkt zum Hauptinhalt bringt. Er ist vor allem wichtig für:

Menschen, die mit Tastatur statt Maus unterwegs sind
Screenreader-Nutzer

Ohne Skiplink müssen Tastaturnutzer bei jedem Seitenaufruf alle Navigationspunkte durchtabben, bevor sie beim eigentlichen Inhalt landen. Auf einer großen Seite wird das schnell nervig – und unzugänglich.

Ein klassischer Skiplink im Markup sieht so aus:

<a href="#main-content" class="skip-link">
  Zum Inhalt springen
</a>

<header>…</header>

<main id="main-content">
  …
</main>

Der Link hängt ganz oben im <body> und zeigt auf den Hauptbereich der Seite (hier: <main id="main-content">).

Wo das Problem meist beginnt: „Er funktioniert irgendwie, aber nicht richtig“

Viele Entwickler bauen Skiplinks so:

Der Link ist per CSS erstmal nach oben „weg animiert“ oder versteckt.
Bei Fokus fährt er sichtbar von oben rein.
Der Klick auf den Skiplink führt zwar zum Zielbereich, aber:
Der Fokus bleibt auf dem Link – und genau das ist das Problem.

Typischer Ablauf ohne saubere Fokussteuerung:

Tab → Fokus liegt auf dem Skiplink.
Enter (oder klick) → Seite scrollt zum Zielbereich (#main-content), aber der Fokus hängt immer noch am Link ganz oben.
Nächster Tab → der Fokus springt als nächstes wieder durch die Navigation oder andere Elemente im Kopfbereich.

Optisch ist man im Content, aus Sicht der Tastatursteuerung aber immer noch im Header. Für Screenreader ist das noch verwirrender.

`tabindex` verstehen: 0, -1 und kein Attribut

Damit klar wird, warum tabindex="-1" hilft, lohnt ein kurzer Blick auf das Attribut selbst.

Kein `tabindex`

Ohne tabindex sind nur native, interaktive Elemente fokussierbar:

Links (<a href>)
Buttons
Formularelemente
usw.

Ein <div> oder <main> bekommt normalerweise keinen Fokus.

tabindex="0"

Element wird fokussierbar
und in die normale Tab-Reihenfolge eingehängt.
Tastaturnutzer können das Element ganz normal mit Tab erreichen.

Das ist sinnvoll für selbst gebaute interaktive Komponenten (z. B. eigene Buttons oder Widgets), aber nicht unbedingt für Layout-Container.

tabindex="1"

Element ist fokussierbar, aber nicht ertabbbar.
Man kann den Fokus nur programmatisch oder über spezielle Mechanismen dorthin setzen (z. B. element.focus() in JavaScript).
Es taucht nicht als eigener „Tab-Stopp“ in der normalen Tastatur-Navigation auf.

Genau das macht tabindex="-1" für Skiplink-Ziele so spannend.

Warum der Zielbereich `tabindex="-1"` bekommen sollte

Nehmen wir dieses Muster:

<a href="#main-content" class="skip-link">
  Zum Inhalt springen
</a>

<main id="main-content">
  …
</main>

Ohne tabindex="-1" auf <main> passiert beim Aktivieren des Skiplinks meist:

Der Browser scrollt zu #main-content,
der tatsächliche Fokus bleibt aber auf dem Link ganz oben hängen.

Das heißt:

Tastaturnutzer sind optisch im Inhalt, fokustechnisch aber noch bei der Navigation.
Screenreader-Nutzer bekommen nicht klar signalisiert: „Du bist jetzt im Hauptbereich“.

Wenn du dem <main> zusätzlich tabindex="-1" gibst, wird es zum gezielten Fokusziel, ohne ein unnötiger Tab-Stopp zu werden:

<main id="main-content" tabindex="-1">
  …
</main>

Jetzt kannst du beim Aktivieren des Skiplinks den Fokus explizit dorthin setzen.

Das saubere Muster: Skiplink + Zielbereich + Fokus setzen

Ein robustes Setup sieht zum Beispiel so aus:

<body class="relative">
  <a href="#main-content" class="skip-link">
    Zum Inhalt springen
  </a>

  <header>…</header>

  <main id="main-content" tabindex="-1">
    …
  </main>
</body>

CSS für den „von oben reinsliden“-Effekt:

.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    background: var(--bg-color-footer);
    color: #fff;
    outline: 3px dashed #1d578a;
    outline-offset: 5px;
    padding: 10px 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: transform 0.2s ease-in-out;
    z-index: 1000;
}

/* Sichtbar, sobald der Fokus über Tastatur auf dem Link liegt */
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateX(-50%) translateY(0);
}

Optional kannst du das noch mit einem kleinen JavaScript ergänzen, um den Fokus zu 100 % zuverlässig auf den Zielbereich zu setzen:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const skipLink = document.querySelector('.skip-link');

    if (!skipLink) return;

    skipLink.addEventListener('click', (event) => {
      const target = document.getElementById('main-content');
      if (!target) return;

      // Fokus explizit auf den Zielbereich setzen
      target.focus();
    });
  });
</script>

Jetzt ist der Ablauf perfekt:

Tab → Skiplink erscheint und ist fokussiert.
Enter → Seite springt zum Hauptinhalt, Fokus liegt auf <main>.
Nächster Tab → erstes interaktives Element im Inhalt.

Damit wird die Navigation nicht nur optisch, sondern auch aus Sicht der Tastatursteuerung übersprungen.

Typische Fehler bei Skiplinks (und wie du sie vermeidest)

1. `display: none` oder `hidden` auf dem Skiplink

Ein Skiplink mit display: none, visibility: hidden oder einer Utility-Klasse wie hidden (Tailwind) ist:

unsichtbar
und nicht fokussierbar

Damit ist er für Tastaturnutzer unerreichbar. Besser:

Element immer im DOM lassen,
visuell außerhalb des Viewports positionieren (transform, top: -…)
und nur bei Fokus „hereinholen“.

2. Fokusrahmen abschalten (`outline: none !important;`)

Der Fokusindikator ist für Tastaturnutzer das, was der Mauszeiger für Mausnutzer ist.
Wenn du outline: none !important; setzt, nimmst du ihnen die Orientierung.

Besser:

Standard-Fokusrahmen nutzen oder
einen gut sichtbaren, eigenen Fokusstil definieren.

3. Zielbereich ohne Landmark

Den Hauptinhalt in ein <main> zu legen, ist aus Semantik-Sicht sinnvoll:

<main id="main-content" tabindex="-1">
  …
</main>

Screenreader können so den Hauptbereich schneller anspringen, und dein Skiplink wird semantisch klarer.

Checkliste: Ist dein Skiplink wirklich barrierefrei?

Zum Abschluss eine kleine Checkliste, mit der du deinen Skiplink prüfen kannst:

Der Skiplink steht ganz oben im <body>.
Er ist nicht mit display: none, visibility: hidden oder hidden ausgeblendet.
Er ist standardmäßig außerhalb des Viewports (z. B. via transform), aber bei :focus sichtbar.
Der Link hat einen klaren Text, z. B. „Zum Inhalt springen“.
Der Zielbereich (z. B. <main>) trägt eine eindeutige id.
Der Zielbereich hat tabindex="-1", damit der Fokus gezielt darauf gesetzt werden kann.
Optional: Ein kurzes Skript setzt beim Aktivieren des Skiplinks den Fokus auf den Zielbereich.
Der Fokusstil (Outline) ist sichtbar und gut erkennbar.

Fazit

Ein Skiplink ist schnell gebaut – aber erst mit der richtigen Kombination aus HTML, CSS, tabindex="-1" und sauberer Fokussteuerung wird er wirklich nützlich.

tabindex="-1" macht den Zielbereich fokussierbar, ohne ihn in die Tab-Reihenfolge zu hängen.
Der Fokus landet nach Aktivierung des Skiplinks tatsächlich im Inhalt.
Tastaturnutzer sparen sich die Navigation, Screenreader-Nutzer bekommen klar signalisiert, dass sie im Hauptbereich sind.

Wenn du deine Website ernsthaft barrierefrei gestalten willst, gehört ein funktionierender Skiplink zu den Basics – und mit dem Muster aus diesem Artikel hast du dafür eine stabile Grundlage.