Stellen wir uns vor, jemand öffnet die Website eines Studios und möchte von der Startseite zu den Leistungen und anschließend zum Kontakt gelangen, ohne die Maus zu benutzen. Ist die aktuelle Position erkennbar? Lässt sich der gewünschte Bereich öffnen? Dieser kurze Weg zeigt, ob die Navigation auch jenseits eines schönen Entwurfs funktioniert. Das Grundprinzip der W3C-WAI-Erläuterung zur Tastaturbedienung lautet: Die Funktionen der Oberfläche sollen per Tastatur verfügbar sein.
Mit einer klaren Struktur beginnen
Für eine gewöhnliche Navigation eignen sich Links in Listen innerhalb eines nav-Elements, wie im WAI-Tutorial zur Menüstruktur beschrieben. Ein Link führt zu einer Seite, ein Button öffnet oder schließt ein Untermenü. Hat „Leistungen“ sowohl eine Übersichtsseite als auch untergeordnete Bereiche, sollten diese Aktionen getrennt sein. So lässt sich das Verhalten vor der Entwicklung erklären: Die Bezeichnung führt zur Übersicht, ein benachbarter Button zeigt weitere Auswahlmöglichkeiten.
Die Reihenfolge bewusst planen
Tab sollte einen verständlichen Weg verfolgen, Umschalt + Tab führt zurück. Die WAI-Erläuterung zur Fokusreihenfolge betont, dass Bedeutung und Bedienbarkeit erhalten bleiben müssen. Markieren Sie den Weg im Entwurf: Logo, Hauptlinks, Anfrage-Button, danach das nächste Bedienelement der Seite. Springt der Fokus unerwartet zwischen entfernten Bereichen, prüfen Sie die Reihenfolge im Code, nicht nur die sichtbare Anordnung. Stimmen Sie den vorgesehenen Ablauf ab, bevor Animationen hinzukommen.
Den Fokus deutlich sichtbar machen
Der Fokus zeigt, welches Element die nächste Tastaturaktion erhält. Laut Focus Visible darf seine sichtbare Kennzeichnung nicht einfach nach kurzer Zeit verschwinden. Entfernen Sie den Standardrahmen nicht ohne gut sichtbaren Ersatz. Das WAI-Tutorial zur Menügestaltung unterscheidet Fokus und aktuelle Seite als eigene Zustände. Entwerfen Sie beide gemeinsam: Eine Unterstreichung kann den geöffneten Bereich kennzeichnen, ein deutlicher Rahmen die aktuelle Tastaturposition.
Untermenüs gezielt öffnen
Untergeordnete Links dürfen nicht ausschließlich beim Darüberfahren mit der Maus erscheinen. Die WAI-Anleitung zu ausklappbaren Menüs behandelt Tastaturbedienung und die Zustandsangabe mit aria-expanded. Eine gewöhnliche Navigation benötigt nicht automatisch die Rolle menu. Im WAI-Beispiel einer Disclosure-Navigation aktivieren Eingabe- und Leertaste die Buttons; Escape schließt das Untermenü und setzt den Fokus auf seinen Button zurück. Prüfen Sie dieses Verhalten in Ihrer Umsetzung, statt den Beispielcode ungeprüft als fertige Lösung einzusetzen.
Einen tatsächlichen Weg ausprobieren
- Öffnen Sie die Startseite und legen Sie die Maus beiseite. Erreichen Sie den ersten Menüpunkt mit Tab.
- Gehen Sie zu „Leistungen“, öffnen Sie das Untermenü und wählen Sie eine Seite. Wiederholen Sie den Weg rückwärts.
- Schließen und öffnen Sie das Untermenü erneut. Prüfen Sie nach jeder Aktion, wo der Fokus erscheint.
- Wiederholen Sie den Ablauf mit schmalem Fenster und vergrößerter Seitendarstellung. Lassen Sie vorhandene Hinweise und fixierte Leisten sichtbar.
Prüfen Sie Überlagerungen gesondert: Nach WAI darf eigener Seiteninhalt das fokussierte Element nicht vollständig verdecken. Außerdem muss es möglich sein, ein Bedienelement per Tastatur wieder zu verlassen. Ein gewöhnliches Menü darf die Navigation nicht endlos in seinem Inneren kreisen lassen.
Verhalten statt Eindrücke dokumentieren
Ein hilfreicher Fehlerbericht nennt Seitenadresse, Browser, Fensterbreite, Tastenfolge und erwartetes Ergebnis. Schreiben Sie statt „Das Menü ist umständlich“ beispielsweise: „Nach dem Schließen verschwindet der sichtbare Fokus; beim nächsten Tab beginnt der Weg erneut.“ Diese Genauigkeit erleichtert die Nachprüfung. Der kurze Ablauf kann Navigationsprobleme aufdecken, ersetzt aber keine vollständige Bewertung der Barrierefreiheit und belegt allein keine WCAG-Konformität.