3.2.4 Konsistente Erkennung

Komponenten, die auf einer Website dasselbe tun, etwa eine Suchschaltfläche oder ein Download-Link, müssen jedes Mal gleich benannt und gekennzeichnet sein.

/ Was es verlangt

Erfüllt eine Komponente auf mehreren Seiten dieselbe Aufgabe, sollen Menschen sie jedes Mal als dieselbe erkennen. Eine Suchschaltfläche, die auf einer Seite „Suchen“ und auf der nächsten „Finden“ heißt, oder ein Drucksymbol, das an zwei Stellen unterschiedlich gezeichnet ist, lässt zweifeln, ob beide etwas anderes tun. Screenreader-Nutzende erkennen Bedienelemente am Namen, den sie hören, und Menschen mit kognitiven Beeinträchtigungen verlassen sich auf eine vertraute Beschriftung oder ein vertrautes Symbol, statt das Bedienelement auf jeder Seite neu zu ergründen. Konsistente Erkennung erlaubt es, das auf einer Seite Gelernte auf die nächste mitzunehmen.

Dieselbe Funktionalität heißt: dasselbe Ergebnis bei der Benutzung. Erfasst sind funktionale Komponenten, die sich innerhalb eines Satzes von Webseiten wiederholen, auf verschiedenen Seiten, mehrfach auf einer Seite oder beides. Erkennbar machen kann sie eine sichtbare Beschriftung, ein zugänglicher Name, eine Textalternative oder ein Symbol. Identisch muss das nicht sein: W3C akzeptiert Formulierungen, die sich dem Kontext anpassen, solange die Funktion erkennbar bleibt, etwa ein Link „Seite 4“, der von Seite 5 aus „Vorherige Seite“ heißt. Komponenten mit unterschiedlicher Funktion fallen nicht darunter, auch wenn sie ähnlich aussehen, ebenso wenig Inhalte ohne Funktion.

/ Woran Seiten scheitern

Die Suchschaltfläche heißt in der Kopfzeile der meisten Seiten „Suchen“ und auf der Ergebnisseite „Los“.
Ein Download-Symbol hat auf einer Seite den Alternativtext „Herunterladen“ und auf einer anderen „PDF“, für dieselbe Aktion.
Der Link zum Warenkorb ist auf Produktseiten ein Korb-Symbol und im Bestellvorgang ein Einkaufswagen-Symbol.
Zwei Schaltflächen, die dasselbe Newsletter-Formular absenden, haben die zugänglichen Namen „Abonnieren“ und „Senden“, weil aria-label in jeder Vorlage einzeln geschrieben wurde.
Die Schließen-Schaltfläche von Dialogen heißt in einigen „Schließen“, in anderen „Verwerfen“ oder nur „x“, innerhalb derselben Website.

/ So prüfen Sie es selbst

Listen Sie die Komponenten auf, die sich auf der Website wiederholen: Suche, Anmelden, Warenkorb, Sprachumschalter, Drucken, Teilen, Herunterladen, Schließen-Schaltflächen und Blätternavigation.
Rufen Sie mehrere Seiten auf, die jede davon enthalten, und notieren Sie sichtbare Beschriftung, Symbol und Alternativtext.
Lesen Sie den zugänglichen Namen jeder Komponente in den Entwicklerwerkzeugen ab: im Bereich Accessibility des Elements-Panels in Chrome oder Edge oder im Barrierefreiheitsinspektor von Firefox.
Vergleichen Sie die Seiten. Dieselbe Funktion sollte dieselbe Beschriftung oder dasselbe Symbol und denselben Namen tragen, oder eine Variante, die nur den Kontext widerspiegelt, wie „Weiter“ und „Zurück“ in der Blätternavigation.
Hören Sie sich die wiederkehrenden Bedienelemente mit einem Screenreader wie NVDA an, um die Namen so zu hören, wie blinde Nutzende sie hören.

/ So beheben Sie es

Bauen Sie wiederkehrende Bedienelemente aus einer Komponente, deren Beschriftung aus einem einzigen Text stammt und nicht in jeder Vorlage neu getippt wird.
Halten Sie Beschriftungen, aria-label-Werte und Alternativtexte gemeinsamer Symbole in einer Text- oder Übersetzungsdatei, nach Funktion geordnet.
Verwenden Sie auf der ganzen Website einen Symbolsatz und für jede Funktion ein Symbol.
Wo ein aria-label nötig ist, gleichen Sie es an die sichtbare Beschriftung an, damit gehörter und gesehener Name übereinstimmen.
Legen Sie eine kurze Liste von Namen für häufige Aktionen fest, etwa „Suchen“, „Anmelden“, „Warenkorb“, „Schließen“ und „Herunterladen“, und prüfen Sie neue Vorlagen dagegen.

/ Was unser Scanner prüft

Unser Scan hat keine automatische Prüfung für dieses Kriterium. Er berechnet den zugänglichen Namen jedes Bedienelements auf einer Seite und meldet Elemente ohne Namen unter 4.1.2, stellt aber nie den Namen eines Bedienelements auf einer Seite seinem Gegenstück auf einer anderen gegenüber und kann nicht beurteilen, welche Komponenten dieselbe Funktion haben. HTML_CodeSniffer gibt hier nur einen Hinweis aus, den unsere Verarbeitung verwirft. Ob Beschriftungen auf der ganzen Website konsistent sind, beurteilt ein Mensch in der manuellen Prüfung.

/ Wer es verletzt, nach unseren eigenen Messungen

Der wöchentliche Index hat für dieses Kriterium keine Zahlen, weil keine Prüfung des Website-Scans es testen kann. Ein Mensch beurteilt es, und genau dafür gibt es ein manuelles Audit.

Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.

/ Fragen zu diesem Kriterium

Brauchen wiederkehrende Schaltflächen identische Beschriftungen?

Nicht immer. W3C verlangt, dass Nutzende dieselbe Funktion wiedererkennen, und akzeptiert Beschriftungen, die sich dem Kontext anpassen, etwa „Vorherige Seite“ statt „Seite 4“. Dieselbe Beschriftung für dieselbe Funktion bleibt die sicherste Wahl. Der übliche Verstoß sind verschiedene Wörter für dieselbe Aktion, wie „Suchen“ auf einer Seite und „Finden“ auf einer anderen.

Gilt 3.2.4 auch für Symbole und Alternativtexte?

Ja. Erkennbar machen kann eine Komponente eine sichtbare Beschriftung, ein zugänglicher Name, eine Textalternative oder ein Symbol. Ein wiederkehrendes Symbol mit derselben Aufgabe sollte jedes Mal gleich aussehen und denselben Alternativtext oder zugänglichen Namen tragen. Ein ausgetauschtes Symbol oder ein Alternativtext, der von Seite zu Seite wechselt, zerstört die Wiedererkennung, die das Kriterium schützt.

Welche Stufe hat 3.2.4, und gilt es auch auf einer einzelnen Seite?

Stufe AA, seit WCAG 2.0. Das Kriterium gilt innerhalb eines Satzes von Webseiten, und W3C merkt an, dass wiederkehrende Komponenten auf verschiedenen Seiten, mehrfach auf derselben Seite oder in beiden Fällen auftreten können. Zwei Schaltflächen auf einer Seite, die dieselbe Art Dialog schließen und verschieden heißen, fallen darunter.

Eigene Seite messen Alle gemessenen Barrieren