WCAG 3.2.3 Konsistente Navigation

Das Erfolgskriterium 3.2.3 hilft Menschen, die sich nach Gedächtnis und Gewohnheit orientieren: Screenreader-Nutzern, die das Menü der Reihe nach anhören, Menschen mit Bildschirmlupe, die nur einen Teil der Seite sehen, und Menschen mit kognitiven Beeinträchtigungen. Ist „Warenkorb“ auf einer Seite der dritte Link und auf einer anderen der sechste, müssen sie jedes Mal neu suchen. Es gehört zur Konformitätsstufe AA und steht in EN 301 549 als Abschnitt 9.3.2.3. Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Navigationsmechanismen, die auf mehreren Webseiten innerhalb einer Gruppe von Webseiten wiederholt werden, müssen bei jeder Wiederholung in derselben relativen Reihenfolge erscheinen, es sei denn, der Nutzer veranlasst die Änderung.

• Eine Gruppe von Webseiten ist eine Sammlung mit gemeinsamem Zweck, die vom selben Autor oder derselben Organisation erstellt wurde — typischerweise ein Shop. Verschiedene Sprachversionen zählen als verschiedene Gruppen.
• „Dieselbe relative Reihenfolge“ erlaubt, Einträge hinzuzufügen oder zu entfernen. Ein aufklappendes Untermenü oder ein zusätzlicher Link auf manchen Seiten ist in Ordnung, solange die übrigen Einträge ihre Reihenfolge behalten.
• Die einzige Ausnahme ist eine vom Nutzer veranlasste Änderung, etwa eine personalisierte Menüreihenfolge, die er gewählt hat.

Typische Fehler in Onlineshops

• der Header der Startseite nutzt ein anderes Template als Kategorie- und Produktseiten, mit Links in anderer Reihenfolge;
• der Checkout nutzt einen vereinfachten Header, in dem die verbleibenden Links umsortiert sind;
• die Icons für Konto, Suche und Warenkorb tauschen auf Blog- oder Landingpages aus einem Page-Builder die Plätze;
• die Reihenfolge der Footer-Links unterscheidet sich zwischen Shopseiten und Seiten, die von einer App ausgeliefert werden;
• die Reihenfolge des mobilen Menüs unterscheidet sich zwischen Seiten bei gleicher Bildschirmbreite.

So prüfen Sie es

Automatisch: Unser Checker hat für dieses Kriterium keine Regel. Dafür muss man die Navigation über mehrere Seiten vergleichen, das ist eine manuelle Prüfung.

Manuell: Wählen Sie fünf oder sechs Seitentypen — Startseite, Kategorie, Produkt, Warenkorb, Checkout, Blog, Inhaltsseite. Notieren Sie auf jeder die Reihenfolge von Hauptmenü, Header-Icons, Breadcrumbs und Footer-Links oder lesen Sie sie mit Tab aus. Vergleichen Sie die Listen. Machen Sie das bei Desktop-Breite und noch einmal bei Smartphone-Breite, denn jedes Layout wird mit sich selbst verglichen.

So beheben Sie es

• Bauen Sie Header und Footer aus einer gemeinsamen Komponente oder einem Theme-Abschnitt, statt sie in Templates zu kopieren.
• Braucht eine Seite weniger Einträge (wie im Checkout), entfernen Sie Einträge, sortieren Sie die übrigen aber nicht um.
• Halten Sie Header-Icons (Suche, Konto, Warenkorb) im Code in einer festen Reihenfolge, nicht nur visuell.
• Prüfen Sie Landingpages aus dem Page-Builder vor der Veröffentlichung gegen das Haupt-Theme.

Verwandte Kriterien

• 3.2.4 Konsistente Erkennung — gleiche Funktionen werden gleich benannt.
• 3.2.6 Konsistente Hilfe — Hilfe-Links bleiben in derselben Reihenfolge.
• 2.4.1 Blöcke umgehen — eine Möglichkeit, die wiederholte Navigation zu überspringen.

Häufige Fragen

Muss das Menü auf jeder Seite identisch aussehen?

Nein. Wiederholte Einträge müssen dieselbe relative Reihenfolge behalten. Sie dürfen Einträge hinzufügen oder entfernen, etwa auf einer Kategorieseite ein Untermenü aufklappen, solange die übrigen Einträge in derselben Reihenfolge bleiben.

Zählen Sprachversionen einer Website als eine Gruppe von Seiten?

Nein. Die WCAG behandeln verschiedene Sprachversionen als verschiedene Gruppen von Webseiten, daher werden das deutsche und das englische Menü getrennt verglichen.

Kann ein automatischer Checker konsistente Navigation prüfen?

Nicht zuverlässig. Dafür muss man die Navigation über viele Seiten vergleichen, deshalb wird sie manuell geprüft.