WCAG 3.2.4 Konsistente Erkennung

Das Erfolgskriterium 3.2.4 lässt Menschen eine Website einmal lernen. Screenreader-Nutzer verlassen sich auf zugängliche Namen, Menschen mit kognitiven oder Lernbeeinträchtigungen darauf, Wörter und Icons wiederzuerkennen. Heißt derselbe Such-Button auf einer Seite „Suchen“ und auf einer anderen „Finden“, halten sie ihn womöglich für eine andere Funktion. Es gehört zur Konformitätsstufe AA und steht in EN 301 549 als Abschnitt 9.3.2.4. Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Komponenten mit derselben Funktionalität innerhalb einer Gruppe von Webseiten müssen konsistent gekennzeichnet sein. „Dieselbe Funktionalität“ bedeutet, dass die Komponente bei der Benutzung dasselbe Ergebnis liefert. Zur Kennzeichnung gehören die sichtbare Beschriftung, das Icon und die Textalternative bzw. der zugängliche Name.

Klarstellungen aus dem W3C-Dokument „Understanding“:

• konsistent bedeutet nicht identisch; die Formulierung darf sich dem Kontext anpassen, solange die Funktion erkennbar bleibt;
• Komponenten, die Verschiedenes tun, müssen nicht gleich beschriftet sein;
• es gilt nur für Komponenten, die tatsächlich auf mehreren Seiten wiederholt werden.

Typische Fehler in Onlineshops

• „In den Warenkorb“ auf Produktseiten und „Kaufen“ auf Kategorieseiten für dieselbe Aktion, mit unterschiedlichen zugänglichen Namen;
• das Warenkorb-Icon hat in einem Template den Alternativtext „Warenkorb“ und in einem anderen „Tasche“ oder gar keinen Namen;
• das Suchfeld heißt im Header „Suchen“ und im mobilen Menü „Produkte finden“, mit unterschiedlichen Icons;
• derselbe Link „Rechnung herunterladen“ nutzt an einer Stelle ein Drucker- und an einer anderen ein Dokument-Icon;
• eine sichtbare Beschriftung bleibt gleich, aber das aria-label unterscheidet sich zwischen Seiten.

So prüfen Sie es

Automatisch: Unser Checker hat für dieses Kriterium keine Regel. Er kann fehlende Namen melden (siehe 4.1.2), aber ob zwei Komponenten dieselbe Funktion haben, muss ein Mensch entscheiden.

Manuell: Listen Sie die Komponenten auf, die auf vielen Seiten erscheinen: Suche, Warenkorb, Konto, Wunschzettel, In den Warenkorb, Newsletter-Anmeldung, Sprachumschalter. Vergleichen Sie auf mehreren Seitentypen ihre sichtbare Beschriftung, ihr Icon und ihren zugänglichen Namen (Element untersuchen oder Screenreader nutzen). Notieren Sie alle, die sich bei gleicher Funktion unterscheiden.

So beheben Sie es

• Legen Sie Beschriftungen einmal in den Übersetzungsstrings des Themes fest und verwenden Sie sie in jedem Template.
• Verwenden Sie ein Icon-Set und für jede Funktion dieselbe Textalternative.
• Halten Sie aria-label-Werte synchron mit den sichtbaren Beschriftungen und beginnen Sie den zugänglichen Namen mit dem sichtbaren Text.
• Wenn Apps eigene Buttons hinzufügen, benennen Sie sie passend zur Formulierung des Themes um.

Verwandte Kriterien

• 3.2.3 Konsistente Navigation — wiederholte Navigation in derselben Reihenfolge.
• 2.5.3 Beschriftung (Label) im Namen — der zugängliche Name enthält die sichtbare Beschriftung.
• 4.1.2 Name, Rolle, Wert — jedes Bedienelement hat einen Namen.

Häufige Fragen

Müssen Beschriftungen Wort für Wort identisch sein?

Nein. Laut WCAG bedeutet konsistent nicht identisch. Die Beschriftungen müssen deutlich machen, dass es dieselbe Funktion ist; „In den Warenkorb“ und „In den Warenkorb: Blaue Jacke“ sind zum Beispiel konsistent.

Gilt 3.2.4 für Icons?

Ja. Auch Icons und ihre Textalternativen kennzeichnen Komponenten. Für den Warenkorb auf einer Seite ein Taschen-Icon und auf einer anderen ein Einkaufswagen-Icon mit anderem Alternativtext zu verwenden, kann ein Verstoß sein.

Kann ein automatischer Checker 3.2.4 prüfen?

Nein. Ob zwei Komponenten dieselbe Funktion haben, muss ein Mensch entscheiden — das ist eine manuelle Prüfung über mehrere Seiten.