Die Regel keyboard:skip-link meldet eine Seite, deren erster Tab-Halt kein funktionierender Link zum Hauptinhalt ist. Tastatur-Nutzende tabben dann auf jeder Seite durch Logo, das ganze Menü und die Suche, bevor sie etwas Neues erreichen. Die Lösung ist ein Link „Zum Inhalt springen“ als erstes fokussierbares Element, der auf ein vorhandenes Element zeigt.
Was die Regel bedeutet
WCAG 2.4.1 verlangt eine Möglichkeit, Inhaltsblöcke zu überspringen, die sich auf jeder Seite wiederholen. Genau genommen sind auch Landmarks und Überschriften anerkannte Wege dazu – sie helfen aber nur Menschen, deren Software nach Landmarks oder Überschriften springen kann, also vor allem Screenreader-Nutzenden. Für sehende Menschen mit Tastatur ist der Skip-Link der Mechanismus: einmal Tab, einmal Enter, und die Navigation liegt hinter ihnen.
Ein Skip-Link darf versteckt sein, bis er den Fokus bekommt. Dann muss er sichtbar werden, und sein Ziel muss existieren.
Wen es betrifft
Sehende Tastatur-Nutzende – Menschen mit motorischen Einschränkungen mit Tastatur, Schalter oder Mundstab und Menschen mit Sehbehinderung mit Bildschirmlupe. Eine Navigation mit dreißig Links heißt dreißig Tab-Drücke auf jeder Seite, und mit einem Schalter ist jeder Druck langsam und anstrengend.
Warum die Prüfung anschlägt
- Gar kein Skip-Link – der erste Tab landet auf dem Logo.
- Ein Skip-Link, der nicht zuerst kommt, sondern hinter Cookie-Banner, Sprachumschalter oder „Rufen Sie uns an“-Link.
- Ein kaputtes Ziel:
href="#main", während der Inhaltid="content"hat – oder gar keine ID. href="#"oder ein Button mit Skript statt eines Links innerhalb der Seite.- Themes und Vorlagen, die einen Skip-Link mitbrachten, den ein späteres Redesign entfernt hat.
So beheben Sie es
Setzen Sie den Skip-Link als erstes Element in den <body>, lassen Sie ihn auf den Hauptinhalt zeigen und geben Sie diesem Element die ID.
<!-- Vorher: Der erste Tab landet auf dem Logo -->
<body>
<header>
<a href="/"><img src="/logo.svg" alt="Beispiel GmbH – Startseite"></a>
<nav aria-label="Hauptmenü">
<a href="/produkte/">Produkte</a> <a href="/kontakt/">Kontakt</a>
</nav>
</header>
<main><h1>Unsere Produkte</h1></main>
</body><!-- Nachher: zuerst der Skip-Link, mit einem Ziel, das es gibt -->
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<header>
<a href="/"><img src="/logo.svg" alt="Beispiel GmbH – Startseite"></a>
<nav aria-label="Hauptmenü">
<a href="/produkte/">Produkte</a> <a href="/kontakt/">Kontakt</a>
</nav>
</header>
<main id="inhalt"><h1>Unsere Produkte</h1></main>
</body>Verstecken Sie ihn, bis er gebraucht wird, und holen Sie ihn beim Fokus ins Bild:
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; padding: .5rem 1rem; background: #ffffff; color: #1a1a1a; }So prüfen Sie es von Hand
- Laden Sie die Seite, klicken Sie in die Adresszeile und drücken Sie einmal Tab. Erscheint ein Link „Zum Inhalt springen“?
- Drücken Sie Enter. Springt die Seite zum Hauptinhalt, und geht der nächste Tab von dort aus weiter?
- Prüfen Sie, dass der Link auf jeder Vorlage der erste Tab-Halt ist – Startseite, Kategorie, Artikel, Kasse.
- Prüfen Sie, dass er sichtbar bleibt, solange er den Fokus hat, auch in der Mobilansicht.
Zugehöriges WCAG-Kriterium
2.4.1 Blöcke umgehen, Stufe A. Verwandt: 2.4.3 Fokus-Reihenfolge und 1.3.1 Info und Beziehungen, über das Landmarks und Überschriften Screenreader-Nutzenden einen eigenen Weg an der Navigation vorbei geben.
So meldet Reviseberg diese Regel
Diese Regel stammt vom Tastatur-Agenten von Reviseberg, nicht aus axe-core. Bevor er eine Taste drückt, sieht sich der Agent das erste fokussierbare Element der Seite an. Die Seite besteht, wenn es ein Link auf #etwas ist und ein Element mit dieser ID existiert. Sonst scheitert sie mit „The page offers no way to skip the repeated navigation“, und der erste Schritt der Tastenfolge sagt, warum – gar kein Link oder ein Link auf ein Ziel, das es nicht gibt.
Mehr prüft er nicht. Ob das Ziel der Hauptinhalt ist, ob der Link beim Fokus sichtbar wird (das zeigt der nächste Tab-Schritt, gemeldet als undefined) oder ob Landmarks Screenreader-Nutzenden schon helfen, beurteilt er nicht. Deshalb wird der Befund mit dem niedrigsten Schweregrad gemeldet. Erfüllt Ihre Seite 2.4.1 aus Ihrer Sicht auf anderem Weg, halten Sie die Entscheidung mit Begründung am Befund fest.