3.2.3 Konsistente Navigation (Consistent Navigation)

WCAG - Definition

Consistent Navigation (Level AA) fordert, dass wiederkehrende Navigationsmechanismen auf einer Website immer in der gleichen Reihenfolge dargestellt werden, wenn sie auf mehreren Seiten vorkommen.
Das bedeutet: Hauptmenü, Fußnavigation, Seitensuche oder Breadcrumbs dürfen nicht willkürlich verschoben oder in wechselnder Reihenfolge dargestellt werden.

Bedeutung

  • Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten verlassen sich auf die Wiedererkennbarkeit.

  • Screenreader-Nutzer bauen ein mentales Modell der Seite auf. Wenn sich die Reihenfolge plötzlich ändert, entsteht Verwirrung.

  • Konsistenz erleichtert Orientierung und verringert die kognitive Belastung.

Beispiel:

  • Auf Seite A ist das Menü [Startseite | Produkte | Kontakt].

  • Auf Seite B darf es nicht plötzlich [Kontakt | Startseite | Produkte] sein.

Ausreichende Techniken

Einheitliche Navigation einbauen

  • HTML/CSS:
    Navigation in einem wiederverwendbaren Template oder Include-Datei ablegen, damit die Reihenfolge konsistent bleibt.

Verwendung von CMS-/Template-Systemen

  • In Contao, WordPress, Typo3, etc. Menüs zentral pflegen (z. B. „Navigationsmodul“).

  • So bleibt die Reihenfolge technisch garantiert.

Reihenfolge in CSS nicht durcheinanderbringen

  • Keine unnötigen Änderungen per flex-direction: row-reverse; oder order bei flexbox/grid, wenn dadurch die visuelle Reihenfolge variiert.

Breadcrumbs konsistent halten

  • Immer gleich strukturieren: Startseite → Kategorie → Unterseite.

  • Gleiche ARIA-Rolle nutzen (role="navigation" aria-label="Breadcrumb").

Beratungstechniken

Wenn du Kunden oder Entwickler berätst:

  • Styleguide / Designsystem nutzen: dort Navigationselemente festlegen.

  • Templates prüfen: Alle Templates durchsehen, ob die Reihenfolge konsistent ist.

  • Content-Verantwortlichen schulen: erklären, dass die Menü-Reihenfolge nicht willkürlich verändert werden darf.

  • Nutzer-Tests machen: beobachten, ob Nutzer die Orientierung verlieren, wenn Navigation inkonsistent ist.

Fehler

  • Unterschiedliche Reihenfolge der Menüpunkte auf verschiedenen Seiten.

  • Navigationselemente werden auf manchen Seiten entfernt (z. B. Suche fehlt auf einer Unterseite).

  • In der mobilen Version völlig andere Reihenfolge als auf Desktop (z. B. durch CSS-Reihenfolge-Tricks).

  • Breadcrumbs, die manchmal links, manchmal rechts, manchmal gar nicht auftauchen.

  • Unnötiges Experimentieren mit Navigation → „auf jeder Seite eine Überraschung“.