1. Was ist das Ziel dieses Kriteriums?
Stell dir vor, du gehst jeden Tag ins gleiche Bürogebäude – aber die Aufzüge wären mal links, mal rechts, mal in der Mitte. Das wäre nicht nur nervig, sondern für Menschen mit Sehbehinderungen oder kognitiven Einschränkungen regelrecht orientierungslos machend.
Genau das passiert auf vielen Websites: Das Hauptmenü springt herum, die Suchleiste versteckt sich mal hier, mal da, und wichtige Links wandern von Seite zu Seite. Menschen, die auf vorhersagbare Strukturen angewiesen sind, verlieren schnell die Orientierung.
Das Ziel von Erfolgskriterium 3.2.3 der WCAG ist daher klar: Navigationselemente, die auf mehreren Seiten einer Website auftauchen, müssen immer an der gleichen relativen Position stehen. So können sich alle Nutzer darauf verlassen, wo sie was finden.
2. Was fordert das Erfolgskriterium genau?
Ganz konkret geht es um alle Navigationsmechanismen, die sich auf mehreren Seiten einer Website wiederholen. Diese müssen in derselben relativen Reihenfolge auftreten – es sei denn, der Nutzer selbst ändert etwas daran.
Das bedeutet praktisch:
- Das Hauptmenü behält seine Reihenfolge: "Home, Produkte, Service, Kontakt" bleibt "Home, Produkte, Service, Kontakt"
- Die Suchleiste steht immer an der gleichen Stelle – wenn oben rechts, dann immer oben rechts
- "Skip to Content"-Links erscheinen konstant als erstes Element
- Footer-Navigation folgt der gleichen Struktur auf allen Seiten
Wichtige Klarstellung: "Gleiche relative Reihenfolge" bedeutet nicht, dass nichts hinzugefügt werden darf. Untermenüs können sich ausklappen, zusätzliche Navigationspunkte können eingefügt werden – solange die Grundreihenfolge bestehen bleibt.
Ausnahmen gelten nur, wenn der Nutzer selbst eine Änderung initiiert – etwa durch personalisierte Einstellungen oder adaptive Technologien.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du nutzt eine Bildschirmlupe, die immer nur einen kleinen Ausschnitt der Website zeigt. Oder du bist auf einen Screenreader angewiesen und navigierst hauptsächlich über Tastaturkürzel zu bekannten Positionen. Wenn diese Positionen ständig wechseln, wird jeder Seitenbesuch zum Suchspiel.
Konsistente Navigation schafft Barrierefreiheit, weil sie:
- Menschen mit Sehbehinderungen ermöglicht, sich auf visuelle Marker und räumliche Erinnerungen zu verlassen
- Nutzer mit kognitiven Einschränkungen dabei hilft, mentale Modelle der Website aufzubauen
- Screenreader-Nutzer vorhersagbare Sprungmarken und Navigationspfade bietet
- Menschen mit motorischen Einschränkungen effiziente Navigationswege ohne ständige Neuorientierung ermöglicht
- Alle Nutzer von der verbesserten Benutzerfreundlichkeit profitieren lässt
Das Gehirn liebt Muster – und konsistente Navigation nutzt diese Tatsache, um Websites intuitiver und zugänglicher zu machen.
4. So setzt du das Kriterium erfolgreich um
Die gute Nachricht: Konsistente Navigation ist meist einfacher umzusetzen, als sie zu vermeiden. Hier die bewährtesten Strategien:
Template-basierte Entwicklung:
- Verwende einheitliche Layout-Vorlagen für alle Seiten
- Definiere feste Positionen für wiederkehrende Elemente
- Nutze CSS-Grid oder Flexbox für konsistente Anordnungen
- Halte die HTML-Struktur zwischen Seiten vergleichbar
Navigation richtig strukturieren:
- Platziere das Hauptmenü immer an derselben Stelle (meist oben oder links)
- Behalte die Reihenfolge der Menüpunkte bei – auch wenn du neue hinzufügst
- Positioniere Suchfunktionen, Breadcrumbs und "Skip"-Links konsistent
- Sorge für einheitliche Footer-Navigation
Responsive Design beachten:
- Auch bei unterschiedlichen Bildschirmgrößen: relative Reihenfolge beibehalten
- Mobile Burger-Menüs dürfen die Optik ändern, aber nicht die Reihenfolge
- Verwende konsistente Breakpoints und Umbruchlogik
Technische Umsetzung:
- Arbeite mit Komponenten-basierten Frameworks (React, Vue, Angular)
- Nutze Content Management Systeme mit Template-Funktionen
- Implementiere zentrale Navigation-Komponenten, die überall eingebunden werden
- Teste regelmäßig mit Screenreadern und Tastaturbedienung
Was du vermeiden solltest:
- Navigation je nach Seiteninhalt umzustellen
- Menüpunkte wild zu sortieren oder zu verschieben
- Suchfelder mal hier, mal da zu platzieren
- Verschiedene Teams unterschiedliche Navigationskonzepte entwickeln zu lassen
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Auch bei Erfolgskriterium 3.2.3 gilt: Barrierefreiheit ist kein Selbstzweck – sondern bringt handfeste Vorteile für dein Business.
1. Conversion-Rate und Nutzererfahrung verbessern
Konsistente Navigation macht Websites nicht nur barrierefreier, sondern auch benutzerfreundlicher für alle. Nutzer finden schneller, was sie suchen. Sie müssen sich nicht bei jedem Seitenaufruf neu orientieren. Das führt zu höheren Conversion-Raten, längeren Verweildauern und zufriedeneren Kunden.
2. Suchmaschinenoptimierung stärken
Suchmaschinen bewerten Websites positiv, die eine klare, konsistente Struktur haben. Vorhersagbare Navigation hilft Crawlern beim Indexieren und verbessert die interne Verlinkung. Das kann zu besseren Rankings und mehr organischem Traffic führen.
3. Entwicklungskosten senken
Template-basierte, konsistente Navigation reduziert Entwicklungsaufwand und Wartungskosten. Ein einheitliches System ist einfacher zu pflegen, zu testen und zu erweitern. Neue Teammitglieder finden sich schneller zurecht, und Bugs treten seltener auf.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3
Success Criterion 3.2.3 Consistent Navigation (Level AA)
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.