Skip-Links: Der wichtigste unsichtbare Link

Skip-Links sind die unsichtbaren Helden der Barrierefreiheit: sehende Nutzer bemerken sie nie, für Tastatur-Nutzer sind sie Gold wert. Ohne Skip-Link muss ein Screenreader-Nutzer auf jeder Seite durch die komplette Navigation (10–30 Elemente) tabben, bevor der eigentliche Inhalt beginnt.

Wie ein Skip-Link aussehen muss

HTML:
<a href="#main" class="skip-link">Zum Hauptinhalt springen</a>
<!-- ... Navigation ... -->
<main id="main"></main>

CSS (versteckt, bei Fokus sichtbar):
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color: #fff;
  padding: 12px 16px;
  z-index: 9999;
}
.skip-link:focus {
  left: 0;
}

Warum nicht einfach display:none?

display:none entfernt das Element komplett aus dem Accessibility-Baum – Screenreader lesen es nicht vor, Tabreihenfolge springt es. Der Skip-Link ist dann unbrauchbar. Mit left:-9999px oder clip:rect(0 0 0 0) bleibt das Element im Accessibility-Baum, ist aber visuell versteckt – bis es fokussiert wird.

Wo setze ich das Ziel?

Best Practice: auf dem <main>-Tag. Der Skip-Link zeigt auf id="main", <main id="main"> ist das Ziel. Optional kann das Ziel-Element tabindex="-1" bekommen, damit es per Skript fokussierbar ist – sonst springt der Fokus in manchen Browsern nicht korrekt auf das Element, nur zum Seiten-Scroll.

Mehrere Skip-Links

Bei sehr komplexen Seiten kann es mehrere geben: "Zum Hauptinhalt", "Zur Suche", "Zur Navigation", "Zum Footer". Für normale Seiten reicht einer zum Hauptinhalt. Nicht übertreiben.

WCAG-Bezug und Pflicht

WCAG 2.4.1 Bypass Blocks (Level A) fordert einen Mechanismus, um wiederholende Inhaltsblöcke zu überspringen. Der Skip-Link ist die häufigste, aber nicht einzige Umsetzung. Alternative: Landmark-Struktur (header, nav, main), die Screenreader zum Überspringen nutzen können. Best Practice: beides kombinieren. Für BFSG-Konformität ist eine der beiden Lösungen zwingend.