Eine barrierefreie Navigation lässt sich mit Tastatur und Vorlesewerkzeugen vollständig bedienen. Dazu gehören eine erkennbare Reihenfolge, ein sichtbarer Fokus, benannte Bereiche und ein Weg, die Navigation zu überspringen.
- Barrierefreie Navigation
Navigation, die sich mit Tastatur und Vorlesewerkzeugen vollständig bedienen lässt.
Beispiel: „Die barrierefreie Navigation beginnt mit einem Sprunglink zum Inhalt.“Grundlage sind die Web Content Accessibility Guidelines, in Deutschland über das Barrierefreiheitsstärkungsgesetz für viele Angebote verbindlich.
Abgrenzung zur Bedienbarkeit allgemein: Barrierefreiheit ist prüfbar an festen Kriterien. Gute Bedienbarkeit ist das weitere Ziel und schließt sie ein.
Was im Markup dazugehört
Die Navigation steht in einem nav-Element mit einem Namen, damit Vorlesewerkzeuge mehrere Navigationen auseinanderhalten können. Die Punkte stehen in einer Liste, weil deren Anzahl dann mit angesagt wird. Die aktuelle Seite trägt aria-current.
<a class="sprunglink" href="#inhalt">Zum Inhalt springen</a>
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/leistungen/">Leistungen</a></li>
<li><a href="/referenzen/" aria-current="page">Referenzen</a></li>
</ul>
</nav>
<main id="inhalt" tabindex="-1"> ... </main>Der Sprunglink erfüllt das Erfolgskriterium Blöcke umgehen (2.4.1). Er darf unsichtbar sein, muss aber erscheinen, sobald er den Fokus bekommt.
Was die Bedienung ausmacht
Jeder Punkt muss mit der Tabulatortaste erreichbar sein, und zwar in derselben Reihenfolge, in der er zu sehen ist. Der Fokus braucht eine sichtbare Umrandung, die auch auf farbigem Grund erkennbar bleibt; die Standardumrandung des Browsers zu entfernen, ohne eine eigene zu setzen, ist der häufigste Verstoß überhaupt.
Aufklappmenüs dürfen sich nicht allein beim Darüberfahren öffnen. Sie brauchen einen Schalter, der den Zustand über aria-expanded meldet, und die Escape-Taste muss sie wieder schließen.
Welche Bauformen sich bewährt haben, zeigt das W3C in seiner Anleitung zu Menüs, einschließlich der Frage, wann eine Navigation überhaupt ARIA-Rollen braucht.
Woran es in der Praxis scheitert
An der mobilen Navigation. Das Hamburger-Symbol ist oft ein div ohne Namen, das Menü bleibt für die Tastatur erreichbar, obwohl es geschlossen ist, und der Fokus wandert beim Öffnen nicht hinein. Alle drei Fehler treten fast immer gemeinsam auf.
Aus unserer Arbeit an über 2.500 Website-Projekten lässt sich das mit zwei Handgriffen prüfen: einmal die ganze Seite nur mit der Tabulatortaste durchlaufen und einmal mit abgeschaltetem CSS ansehen. Was dabei auffällt, ist fast immer auch der Befund eines Prüfwerkzeugs.