WCAG für die Navigation
Vom ersten Tabstopp zum Inhalt
Sprunglink, Menüliste, Linktexte: der Weg durch die Navigation.
Navigation als Weg
Zeichnen Sie zuerst die Route, dann schreiben Sie das Menü
Eine zugängliche Navigation hat zwei Wege: eine verlässliche Tab-Reihenfolge und eine Abkürzung direkt zum Inhalt. Struktur, Fokus und aktueller Ort halten beide lesbar.
href="#inhalt"aria-current="page"hidden · Kein Tabstopp, keine Ansage.<main id="inhalt" tabindex="-1">Auf dem Bildschirm
Drei sichtbare Wegweiser
- Der Sprunglink wird bei Fokus sichtbar.
- Ein kräftiger Umriss zeigt jeden Tabstopp.
- Linie und Schriftstärke markieren den aktuellen Ort.
Im Accessibility-Baum
Dieselbe Navigation als Struktur
- navigationHauptnavigation
- list4 Einträge
- linkMusterfirma
- link · current pagePreise
Mehrere nav-Bereiche brauchen unterscheidbare Namen. Die Liste liefert Anzahl und Gruppierung; aria-current liefert den Ort.
HTML · vollständiger Seitenkopf
semantische Basis<a class="sprunglink" href="#inhalt">
Zum Inhalt springen
</a>
<header class="kopf">
<a class="marke" href="/">
Musterfirma
</a>
<nav aria-label="Hauptnavigation">
<ul class="menue">
<li><a href="/leistungen/">
Leistungen
</a></li>
<li><a href="/preise/"
aria-current="page">Preise</a></li>
<li><a href="/kontakt/">
Kontakt
</a></li>
</ul>
</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Preise</h1>
<p>Unsere Leistungen im Überblick.</p>
</main> Nutzen Sie Links für Ziele und eine Liste für ihre Gruppe. Ein gewöhnliches Website-Menü braucht keine Rollen menu und menuitem: Diese Rollen versprechen das komplexe Tastenverhalten eines Anwendungsmenüs.
CSS · Fokus, Sprung, Ort
sichtbare Zustände.sprunglink {
position: absolute;
inset-inline-start: 1rem;
transform: translateY(-150%);
}
.sprunglink:focus-visible {
transform: translateY(1rem);
}
.kopf a:focus-visible,
.sprunglink:focus-visible {
outline: 3px solid #3b2bbd;
outline-offset: 3px;
}
.menue {
display: flex;
gap: 1.25rem;
padding: 0;
list-style: none;
}
.menue [aria-current="page"] {
border-bottom: 3px solid currentColor;
font-weight: 700;
}
main:focus {
outline: none;
}tabindex="-1" macht den Hauptinhalt zum Fokusziel, ohne ihn in die normale Tab-Reihenfolge aufzunehmen. Der Umriss am main kann nach dem Sprung entfallen; interaktive Elemente behalten ihren sichtbaren Fokus.
Vier Beobachtungen
So prüfen Sie die Route
- Tab
Nach dem Laden erscheint zuerst „Zum Inhalt springen“. Sein Fokus ist deutlich sichtbar und wird nicht von einem festen Seitenkopf verdeckt.
- Enter
Der Fokus wechselt zum Hauptinhalt. Der nächste Tabstopp liegt im Inhalt und führt nicht zurück durch die gesamte Navigation.
- Tab
Ohne den Sprung folgen Markenlink und Menüpunkte in visueller Reihenfolge. Ein geschlossenes Untermenü taucht auf diesem Weg nicht auf.
- Struktur
Prüfen Sie Regionname, Liste, Linknamen und aktuellen Eintrag im Accessibility-Baum. Ansageformulierungen unterscheiden sich je nach Technik.
Technische Quellen
Die Zuordnung folgt WCAG 2.2 und den aktuellen WAI-Mustern für Website-Navigation.
Aus dem Prüfbericht
Fünf Befunde in einer Kopfzeile
Prüfen Kein Weg am Menü vorbei Regel bypass
Vor der Navigation fehlt ein Sprunglink, und der Inhalt trägt keine Rolle main. Ein Sprunglink als erstes Element hilft.
Kritisch Menüpunkte ohne Text Regel link-name
Symbollinks in der Kopfzeile führen ohne Wort zum Ziel. Der Linktext nennt das Ziel, sonst tut es aria-label.
Kritisch Das Menü ist keine Liste Regel list
Ein Absatz steht direkt in der ul. In eine Liste gehören nur li-Elemente, der Absatz rückt davor.
Kritisch Ein Menüpunkt steht außerhalb Regel listitem
Der letzte Eintrag steht hinter dem schließenden ul-Tag. Er gehört als li in dieselbe Liste.
Zum Mitnehmen
Die Navigation, korrigiert
Ein Sprunglink, eine saubere Liste, ein wirklich geschlossenes Untermenü.
Korrektur in 3 Schritten ansehen
Einen Sprunglink an den Anfang setzen
Der erste Tabstopp führt am Menü vorbei. Das main-Element gibt dem Inhalt das Ziel, das der Sprunglink braucht.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <nav aria-label="Hauptmenü">…</nav> <div class="inhalt">…</div> </body>Nachher
<body> <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a> <nav aria-label="Hauptmenü">…</nav> <main id="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite und drücken Sie einmal Tab. Der Sprunglink erscheint als Erstes.
Das Menü als Liste auszeichnen
In eine ul gehören nur li-Elemente. Der Absatz rückt davor, der verirrte Eintrag rückt in die Liste hinein.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul class="menu"> <p>Bereiche</p> <li><a href="/preise">Preise</a></li> </ul> <li><a href="/kontakt">Kontakt</a></li>Nachher
<p>Bereiche</p> <ul class="menu"> <li><a href="/preise">Preise</a></li> <li><a href="/kontakt">Kontakt</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm kündigt das Menü als Liste mit der richtigen Zahl an Einträgen an.
Das Untermenü wirklich schließen
aria-hidden versteckt nur vor Vorleseprogrammen. Mit hidden verlässt das eingeklappte Untermenü auch die Tab-Reihenfolge.
KorrekturvergleichSchritt 3 · HTML Vorher
<button aria-expanded="false">Service</button> <ul id="service" aria-hidden="true"> <li><a href="/faq">Fragen und Antworten</a></li> </ul>Nachher
<button aria-expanded="false" aria-controls="service">Service</button> <ul id="service" hidden> <li><a href="/faq">Fragen und Antworten</a></li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Tabben Sie bei geschlossenem Untermenü weiter. Der Fokus überspringt die Unterpunkte.