3.2.3 Konsistente Navigation

Menüs, Suchfelder und andere Navigation, die sich auf den Seiten einer Website wiederholen, müssen auf jeder Seite in derselben Reihenfolge stehen, außer die Nutzenden ändern sie selbst.

/ Was es verlangt

Eine Website wiederholt ihre Navigation auf fast jeder Seite: das Hauptmenü, das Suchfeld, die Brotkrumen, die Links im Fußbereich. Das Kriterium verlangt, dass diese Blöcke dort, wo sie sich innerhalb eines Satzes von Webseiten wiederholen, in derselben Reihenfolge zueinander stehen. Menschen, die den Bildschirm vergrößern und jeweils nur einen kleinen Ausschnitt sehen, finden das Menü, weil sie sich merken, wo es war. Screenreader-Nutzende, die eine Seite der Reihe nach durchgehen, lernen, dass die Suche nach dem Menü und vor dem Hauptinhalt kommt. Wechselt die Reihenfolge von Seite zu Seite, müssen beide Gruppen auf jeder Seite neu suchen.

Es geht um die relative Reihenfolge, nicht um identische Seiten. W3C wertet Elemente auch dann als in derselben relativen Reihenfolge, wenn andere Elemente eingefügt oder entfernt werden. Ein Bereichsmenü, das nur in einem Teil der Website erscheint, oder ein Menü, das eine tiefere Ebene aufklappt, verstößt also nicht dagegen. Erfasst ist Navigation, die sich innerhalb eines Satzes von Webseiten wiederholt, also auf Seiten mit gemeinsamem Zweck vom selben Urheber, und verschiedene Sprachversionen gelten als eigene Sätze. Die einzige Ausnahme ist eine Änderung, die von den Nutzenden ausgeht, etwa über eine Einstellung oder ein adaptives Werkzeug, das die Seite umordnet.

/ Woran Seiten scheitern

Das Hauptmenü zeigt auf der Startseite Produkte, Preise und Hilfe, auf den Unterseiten Hilfe, Produkte und Preise.
Das Suchfeld steht im Quelltext mancher Vorlagen vor dem Menü und in anderen dahinter, sodass ein Screenreader beide in wechselnder Reihenfolge vorliest.
Eine Landingpage aus einem separaten Seitenbaukasten ordnet die gemeinsamen Links im Fußbereich anders an als der Rest der Website.
Sprunglink, Sprachumschalter und Kontomenü tauschen zwischen Shop und Blog derselben Website die Plätze.
Ein Skript schiebt den Menüpunkt des aktuellen Bereichs an den Anfang der Liste, sodass sich die Reihenfolge des Menüs von Bereich zu Bereich ändert.

/ So prüfen Sie es selbst

Wählen Sie Seiten aus unterschiedlichen Vorlagen aus: Startseite, Übersicht, Detailseite, Formular, Hilfeseite und jede Landingpage.
Notieren Sie auf jeder Seite die Reihenfolge der wiederkehrenden Blöcke, etwa Kopfzeilenelemente, Hauptmenü, Suche, Brotkrumen, Seitenleiste und Fußbereich, sowie die Reihenfolge der Links in jedem Menü.
Vergleichen Sie die Listen. Auf einer Seite darf ein Block fehlen oder zusätzliche Einträge haben, aber was sich wiederholt, muss seine Reihenfolge behalten.
Prüfen Sie auch die Reihenfolge im Quelltext. Gehen Sie mit Tab von oben durch jede Seite oder öffnen Sie den Barrierefreiheitsbaum in den Entwicklerwerkzeugen, denn CSS kann auf dem Bildschirm eine Reihenfolge zeigen, während das Markup eine andere enthält.
Lassen Sie sich mit einem kostenlosen Screenreader wie NVDA die Landmarks oder Links zweier Seiten auflisten und prüfen Sie, ob die wiederkehrenden in derselben Folge erscheinen.

/ So beheben Sie es

Rendern Sie Kopfzeile, Hauptmenü und Fußbereich aus einer gemeinsamen Komponente oder einem gemeinsamen Vorlagenteil, damit jede Seite dasselbe Markup in derselben Reihenfolge erhält.
Halten Sie die Menüeinträge in einer einzigen Datenquelle, etwa einer zentralen Navigationskonfiguration, statt in Listen, die für jede Seite von Hand geschrieben werden.
Kennzeichnen Sie die aktuelle Seite mit aria-current="page" und einer visuellen Hervorhebung, statt ihren Eintrag an eine andere Stelle zu verschieben.
Ordnen Sie wiederkehrende Blöcke nicht nur in einzelnen Vorlagen mit der CSS-Eigenschaft order, mit flex-direction: row-reverse oder mit absoluter Positionierung um. Visuelle Reihenfolge und DOM-Reihenfolge sollen übereinstimmen.
Braucht ein Bereich ein eigenes Untermenü, fügen Sie es neben der gemeinsamen Navigation ein und lassen Sie die Reihenfolge der gemeinsamen Einträge unangetastet.

/ Was unser Scanner prüft

Keine Prüfung in unserem Scan deckt dies ab. Jede Regel betrachtet jeweils eine gerenderte Seite, die Reihenfolge des Menüs auf einer Seite wird also nie mit einer anderen verglichen. HTML_CodeSniffer gibt zu diesem Kriterium nur einen Hinweis aus, und Hinweise werden verworfen. Der Vergleich der wiederkehrenden Navigation über eine Auswahl von Vorlagen gehört zur manuellen Prüfung.

/ Wer es verletzt, nach unseren eigenen Messungen

Der wöchentliche Index hat für dieses Kriterium keine Zahlen, weil keine Prüfung des Website-Scans es testen kann. Ein Mensch beurteilt es, und genau dafür gibt es ein manuelles Audit.

Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.

/ Fragen zu diesem Kriterium

Heißt konsistente Navigation, dass jede Seite dasselbe Menü braucht?

Nein. Das Kriterium verlangt, dass wiederkehrende Navigation ihre Reihenfolge behält. Eine Seite darf einen Block weglassen und ein Bereich ein Untermenü ergänzen, denn W3C wertet Elemente auch dann als in derselben relativen Reihenfolge, wenn andere eingefügt oder entfernt werden. Ein Verstoß ist es, wenn dieselben wiederkehrenden Links auf verschiedenen Seiten in anderer Folge erscheinen.

Welche Stufe hat 3.2.3 Konsistente Navigation?

Stufe AA. Das Kriterium gehört seit Version 2.0 zu WCAG und ist in 2.1 und 2.2 unverändert. Es gilt innerhalb eines Satzes von Webseiten, den W3C als Seiten mit gemeinsamem Zweck definiert, die vom selben Autor, derselben Gruppe oder Organisation erstellt wurden. Verschiedene Sprachversionen einer Website sind eigene Sätze.

Worin unterscheiden sich 3.2.3 und 3.2.4?

3.2.3 Konsistente Navigation betrifft, wo wiederkehrende Navigation steht: in derselben relativen Reihenfolge auf jeder Seite. 3.2.4 Konsistente Erkennung betrifft, wie Komponenten mit derselben Funktion heißen: mit derselben Beschriftung, demselben Namen oder Symbol, wo immer sie auftauchen. Eine Website kann ihr Menü ordentlich halten und trotzdem gegen 3.2.4 verstoßen, wenn die Suchschaltfläche auf einer Seite „Suchen“ und auf einer anderen „Finden“ heißt.

Eigene Seite messen Alle gemessenen Barrieren