Einheitliche Kennzeichnung
Komponenten mit derselben Funktionalität müssen auf einer Website einheitlich gekennzeichnet sein — gleiche Bezeichnung, gleiche Symbole, gleicher zugänglicher Name. Zwei Schaltflächen, die dieselbe Funktion ausführen, dürfen nicht auf einer Seite „Suchen“ und auf einer anderen „Finden“ heißen.
Was gefordert wird
Wenn zwei Bedienelemente einer Benutzeroberfläche auf einer Website dieselbe Funktion erfüllen, müssen sie einheitlich gekennzeichnet sein. Das bedeutet: gleicher zugänglicher Name (Beschriftung, aria-label, Alternativtext), gleiche Symbole und übereinstimmende visuelle Gestaltung — damit Nutzende erkennen können: „Das ist dieselbe Aktion, die ich zwei Seiten zuvor durchgeführt habe.“
Die Anforderung bezieht sich auf die Beschriftung, nicht auf die Gestaltung. Eine Senden-Schaltfläche darf in unterschiedlichen Kontexten visuell unterschiedlich hervorgehoben werden, aber der zugängliche Name „Senden“ darf nicht an anderer Stelle zu „Abschicken“ werden, wenn dieselbe Funktion ausgeführt wird.
So wird die Anforderung erfüllt
- Ein kleines Vokabular aus Aktionsverben festlegen („Speichern“, „Abbrechen“, „Löschen“, „Suchen“) und dieses konsequent auf der gesamten Website verwenden.
- Für dieselbe Aktion überall dasselbe Symbol nutzen — ein Suchsymbol, nicht drei verschiedene.
- Wenn ein Symbol eine Aktion repräsentiert, muss es auf allen Seiten denselben zugänglichen Namen erhalten.
- Design-System-Komponenten einsetzen (
<Button label="Speichern">), anstatt Beschriftungen pro Seite manuell zu vergeben. - Die Website auf Synonyme prüfen: „Senden“ vs. „Abschicken“, „Suchen“ vs. „Finden“, „Anmelden“ vs. „Einloggen“, „Registrieren“ vs. „Konto erstellen“.
Häufige Fehler
- Zwei Symbole, die dieselbe Aktion repräsentieren, tragen zwei verschiedene zugängliche Namen („Bearbeiten“ auf einem Bildschirm, „Ändern“ auf einem anderen).
- Ein Sucheingabefeld ist im Seitenkopf mit „Suchen“ und in der Seitenleiste mit „Inhalte durchsuchen“ beschriftet.
- Eine „Löschen“-Schaltfläche in der Listenansicht und eine „Entfernen“-Schaltfläche in der Detailansicht — gleiche Wirkung, verschiedene Bezeichnung.
- Inkonsistente CTA-Texte: „Jetzt kaufen“ auf der Produktseite und „In den Warenkorb“ auf der Übersichtsseite, obwohl es sich funktional um dieselbe Aktion handelt.
Warum es wichtig ist
Screenreader-Nutzende navigieren, indem sie eine Liste von Links oder Schaltflächen überfliegen. Wenn dieselbe Aktion auf der Website unterschiedlich bezeichnet wird, können sie keine Muster erkennen — sie müssen jede Bezeichnung neu lesen und abwägen, ob dieses „Abschicken“ mit jenem „Senden“ identisch ist. Für Menschen mit kognitiven Behinderungen ist eine einheitliche Kennzeichnung eine der wirkungsvollsten Hilfen beim Verständnis.
Dieses Erfolgskriterium setzt voraus, dass UI-Texte und Symbole als erstklassige Design-Token behandelt werden — und nicht als Inhalte, über die jede Autorin und jeder Autor individuell entscheidet.