WCAG 2.1 - 3.2.3
Consistent Navigation
Navigationsmechanismen, die auf mehreren Webseiten innerhalb eines Satzes von Webseiten wiederholt werden, erscheinen jedes Mal in derselben relativen Reihenfolge, es sei denn, eine Änderung wird vom Benutzer initiiert.
Inhalt
Was Bedeutet das Success Criterium 3.2.3 - Consistent Navigation?Warum ist es so wichtig, das Success Criterium 3.2.3 - Consistent Navigation zu beachten?Was hat das Success Criterium 3.2.3 - Consistent Navigation mit dem BFSG zu tun?Lösungen für 3.2.3 - Consistent Navigation anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 3.2.3 - Consistent Navigation?Was Bedeutet das Success Criterium 3.2.3 - Consistent Navigation?
Konsistente Navigation bedeutet, dass Navigationselemente (wie z.B. Menüs, Suchfelder, Links zu wichtigen Bereichen, etc.), die auf mehreren Seiten einer Website wiederholt werden, immer in der gleichen Reihenfolge und im gleichen Bereich der Seite erscheinen sollen. Das heißt konkret: Wenn Sie auf Ihrer Startseite eine Hauptnavigation ganz oben haben, dann sollte diese Navigation auf allen weiteren Seiten Ihrer Website an derselben Stelle bleiben und die gleichen Punkte in derselben Reihenfolge enthalten.
Dies hilft besonders Menschen mit Behinderungen, da sie sich dadurch schnell zurechtfinden und wissen, wo bestimmte Elemente immer stehen. Die technische Anforderung ist also: Wiederkehrende Navigationsmechanismen dürfen nicht willkürlich platziert oder in ihrer Reihenfolge verändert werden – sie müssen konsistent eingebunden sein.
Warum ist es so wichtig, das Success Criterium 3.2.3 - Consistent Navigation zu beachten?
Für viele Menschen – z.B. Screenreader-Nutzende, Menschen mit Lernschwierigkeiten oder kognitiven Einschränkungen – ist es eine große Erleichterung, wenn sie sich auf die immer gleiche Struktur der Seiten verlassen können. Sie lernen, an welcher Stelle die Navigation, der Warenkorb, die Suche oder bestimmte Menüpunkte stehen, und können diese dadurch schneller und einfacher finden. Bei Abweichungen entsteht hingegen Verwirrung, was die Nutzung erschwert oder sogar unmöglich macht.
Was hat das Success Criterium 3.2.3 - Consistent Navigation mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet Anbieter digitaler Produkte und Dienstleistungen dazu, Webseiten barrierefrei zu gestalten. Eine inkonsistente Navigation ist ein schwerer Verstoß gegen die WCAG und somit gegen die Anforderungen des BFSG. Wenn Ihre Navigation nicht konsistent gestaltet ist, können Nutzende mit Behinderung Ihre Inhalte nicht im gleichen Maße wie andere konsumieren. Damit sind rechtliche Vorgaben der Barrierefreiheit nicht erfüllt und Sie riskieren formale Beschwerden oder rechtliche Konsequenzen.
Lösungen für 3.2.3 - Consistent Navigation anhand von Codebeispielen
Falscher Code
<!-- Startseite -->
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">Über uns</a></li>
<li><a href="/services">Leistungen</a></li>
<li><a href="/contact">Kontakt</a></li>
</ul>
</nav>
<!-- Unterseite -->
<nav>
<ul>
<li><a href="/contact">Kontakt</a></li>
<li><a href="/services">Leistungen</a></li>
<li><a href="/about">Über uns</a></li>
<li><a href="/home">Home</a></li>
</ul>
</nav>Korrekter Code
<!-- Startseite & Unterseite, Navigation identisch eingebunden: -->
<nav>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">Über uns</a></li>
<li><a href="/services">Leistungen</a></li>
<li><a href="/contact">Kontakt</a></li>
</ul>
</nav>Der schlechte Code zeigt, dass die Reihenfolge der Navigationselemente auf den einzelnen Seiten variiert. Das kann zu Orientierungsschwierigkeiten führen – besonders für Screenreader-Nutzer wird es dadurch nahezu unmöglich, gewohnte Navigationspfade zu nutzen. Im guten Code bleibt die Navigation auf jeder Seite identisch; so wissen Nutzende immer, wo sie welche Links finden.
Falscher Code
<!-- Die Suchfunktion ist manchmal oben, manchmal unten: -->
<header>
<nav>...</nav>
<!-- Keine Suche -->
</header>
<!-- ... -->
<footer>
<form action="/search">Suchfeld hier unten</form>
</footer>
<!-- Auf einer anderen Seite -->
<header>
<form action="/search">Suchfeld hier oben</form>
<nav>...</nav>
</header>Korrekter Code
<!-- Die Suche ist immer oben im Header platziert: -->
<header>
<form action="/search">Suchfeld</form>
<nav>...</nav>
</header>Das Suchfeld sollte immer an derselben (logischen) Stelle verfügbar sein. Menschen mit kognitiven oder motorischen Einschränkungen profitieren davon, weil sie dessen Position nicht jedes Mal neu suchen müssen. Die gute Lösung platziert das Suchfeld konsistent im Header.
Wie löse ich Verstöße gegen das Success Criterium 3.2.3 - Consistent Navigation?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.