WCAG 2.1 - 3.2.4
Consistent Identification
Komponenten, die innerhalb eines Satzes von Webseiten die gleiche Funktionalität aufweisen, werden konsistent identifiziert.
Inhalt
Was Bedeutet das Success Criterium 3.2.4 - Consistent Identification?Warum ist es so wichtig, das Success Criterium 3.2.4 - Consistent Identification zu beachten?Was hat das Success Criterium 3.2.4 - Consistent Identification mit dem BFSG zu tun?Lösungen für 3.2.4 - Consistent Identification anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 3.2.4 - Consistent Identification?Was Bedeutet das Success Criterium 3.2.4 - Consistent Identification?
Das WCAG-Erfolgskriterium 3.2.4 – Consistent Identification verlangt, dass Komponenten, die wiederholt auf einer Webseite vorkommen und die gleiche Funktion haben, auch immer gleich kenntlich gemacht werden. Mit anderen Worten: Wenn Sie auf mehreren Seiten zum Beispiel ein "Suchen"-Feld, eine Schaltfläche für den Warenkorb oder ein Navigationsmenü haben, müssen diese Elemente konsistent aussehen, gleich benannt und technisch gleich ausgezeichnet sein. Das gilt sowohl für die sichtbare Beschriftung als auch für den zugrundeliegenden HTML-Code (z.B. ARIA-Labels, Rollen und IDs).
Dies hilft Nutzerinnen und Nutzern mit Behinderungen, sich auf Ihrer Website besser zurechtzufinden, da sie sich darauf verlassen können, dass gleiche Funktionen immer gleich identifiziert werden – unabhängig davon, wo sie auf der Seite stehen.
Technische Anforderungen:
- Gleiche Steuerelemente oder Komponenten, die dieselbe Funktion haben, müssen konsistent schriftlich beschriftet sein.
- Die zugrundeliegenden ARIA-Attribute, Labels und Rollen müssen ebenfalls konsistent sein.
- optisch konsistente Gestaltung ist auch hilfreich, muss aber insbesondere technisch identisch sein.
Warum ist es so wichtig, das Success Criterium 3.2.4 - Consistent Identification zu beachten?
Viele Menschen mit Behinderungen – insbesondere Nutzer von Screenreadern oder anderen assistiven Technologien – orientieren sich auf Webseiten an gleichförmigen Beschriftungen, Rollen und technischen Strukturen. Wenn ein "Suchen"-Feld auf einer Seite anders heißt oder anders ausgezeichnet ist als auf einer anderen Seite, kann das sehr verwirrend sein oder gar dazu führen, dass sie bestimmte Funktionen verpassen. Konsistenz ist also der Schlüssel zur besseren Orientierung und Bedienung.
Was hat das Success Criterium 3.2.4 - Consistent Identification mit dem BFSG zu tun?
Das BFSG verlangt explizit die Umsetzung der WCAG 2.1, mindestens auf AA-Niveau. 3.2.4 Consistent Identification ist ein verbindliches Kriterium. Wird dieses Kriterium missachtet, erfüllen Webseiten nicht die gesetzlich verbindlichen Mindeststandards für Barrierefreiheit in Deutschland und sind damit nicht rechtskonform. Inkonsistenz bei Bedienelementen kann rechtlich beanstandet werden und ist häufig Auslöser für Beschwerden.
Lösungen für 3.2.4 - Consistent Identification anhand von Codebeispielen
Falscher Code
<!-- Auf Seite 1 -->
<label for="search">Suche:</label>
<input id="search" name="search">
<!-- Auf Seite 2 -->
<label for="find">Finden:</label>
<input id="find" name="find">Korrekter Code
<!-- Einheitlich auf allen Seiten -->
<label for="search">Suche:</label>
<input id="search" name="search">Im schlechten Beispiel werden das gleiche Suchfeld einmal als "Suche:" und einmal als "Finden:" beschriftet, mit unterschiedlichen IDs und Namen. Das ist inkonsistent. Im guten Beispiel werden identische Beschriftungen, IDs und Namen verwendet. Dadurch ist es für alle Nutzer klar erkennbar, dass es sich immer um die Suchfunktion handelt.
Falscher Code
<!-- Auf Seite A -->
<button aria-label="Warenkorb anzeigen">🛒</button>
<!-- Auf Seite B -->
<button aria-label="Zum Warenkorb gehen">🛒</button>Korrekter Code
<!-- Einheitlich auf allen Seiten -->
<button aria-label="Warenkorb anzeigen">🛒</button>Hier wird derselbe Button einmal als "Warenkorb anzeigen" und einmal als "Zum Warenkorb gehen" beschrieben. Für Screenreader-Nutzer ist das verwirrend. Die Benennung muss konsistent bleiben.
Falscher Code
<!-- Logo-Link auf Startseite -->
<a href="/" role="link">Startseite</a>
<!-- Logo-Link auf Unterseite, ohne Rolle -->
<a href="/">Start</a>Korrekter Code
<!-- Einheitlich auf allen Seiten -->
<a href="/" role="link">Startseite</a>Unterschiedliche Rollen oder Linktexte für das gleiche Element sind inkonsistent. Die Rolle (hier "link") und der Text sollten überall gleich sein.
Wie löse ich Verstöße gegen das Success Criterium 3.2.4 - Consistent Identification?
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.