WCAG 3.2.4: Konsistente Erkennung

WCAG 3.2.4 verlangt, dass Bedienelemente mit derselben Funktion innerhalb einer Website einheitlich bezeichnet werden – gleiche sichtbare Beschriftung, gleicher zugänglicher Name, gleiches Icon für dieselbe Aufgabe. Die Suche heißt nicht hier „Suche“, dort „Finden“ und drüben „Los“.

(Englisch: Consistent Identification. Im BIK-BITV-Test heißt der Prüfschritt „3.2.4 Konsistente Bezeichnung“.)

Das Wichtigste in Kürze

• Gleichheit wird nur bei Gleichheit verlangt. Unterschiedliche Funktionen dürfen – und sollen – unterschiedlich heißen.
• Konsistent muss beides sein: die sichtbare Beschriftung und der zugängliche Name, den Hilfsmittel vorlesen.
• Der Prüfschritt fragt zusätzlich, ob kürzere Menüeinträge zu den Überschriften der Zielseiten passen – ein Punkt, der sonst nirgends steht.
• Icons sind Bedeutungsträger. Ein Häkchen, das hier „erledigt“ und dort „auswählen“ meint, verwirrt doppelt.
• Für Sprachsteuerung ist das Kriterium existenziell: Der gelernte Befehl „Klicke Suchen“ muss überall greifen.
• 3.2.3 regelt die Anordnung, 3.2.4 die Benennung – zwei getrennte Prüfschritte mit derselben Grundidee.
• Die nachhaltige Lösung ist strukturell: eine Komponentenbibliothek und ein verbindliches Redaktionsglossar statt Kopieren und Einfügen.
• Stufe AA, seit WCAG 2.0 unverändert und über die EN 301 549 verbindlich.

Darf derselbe Knopf unterschiedlich heißen?

Nein. Bedienelemente mit derselben Funktion brauchen innerhalb einer Website dieselbe Beschriftung, denselben zugänglichen Namen und dasselbe Icon.

Erkennen ist Wiedererkennen. Wer einmal gelernt hat, dass das Lupensymbol „Suchen“ bedeutet und der Pfeil nach unten „Herunterladen“, verlässt sich darauf – auf jeder Seite. Genau diese Verlässlichkeit sichert 3.2.4.

Der Normtext verlangt, dass Bestandteile mit derselben Funktionalität innerhalb einer Gruppe von Webseiten konsistent identifiziert werden. Der deutsche Prüfschritt formuliert es als Anforderung an die Sprache: Navigationsmechanismen und Funktionen, die innerhalb eines Webauftritts wiederholt eingesetzt werden, sollen einheitlich bezeichnet sein.

Konsistenz betrifft dabei drei Ebenen:

Die sichtbare Beschriftung. „In den Warenkorb“ heißt überall so – nicht mal „Kaufen“, mal „Hinzufügen“, mal „Jetzt sichern“. Dasselbe gilt für „Weiter“, „Herunterladen“, „Drucken“, „Teilen“, „Schließen“.

Der zugängliche Name. Ein Lupensymbol ohne Text braucht ein Label – und zwar überall dasselbe. Wenn es auf der Startseite „Suchen“ heißt, im Kopfbereich der Unterseite aber „Absenden“ und im Fußbereich gar nichts, ist das Kriterium verletzt, obwohl optisch dreimal dasselbe Symbol steht.

Die Bedeutung des Symbols. Ein Icon steht für eine Funktion. Wird dasselbe Häkchen an einer Stelle für „erledigt“ und an anderer für „auswählen“ verwendet, entsteht ein Widerspruch, den auch eine korrekte Beschriftung nicht auflöst.

Der Prüfschritt stellt außerdem eine Frage, die im Audit regelmäßig zu Befunden führt und die sonst kaum irgendwo erwähnt wird: Entsprechen kürzere Menüeinträge den Überschriften der Zielseiten? Ein Menüpunkt „Leistungen“, der auf eine Seite mit der Überschrift „Unser Angebot für Unternehmen“ führt, ist eine Inkonsistenz – man weiß nach dem Klick nicht sicher, ob man richtig gelandet ist. Der Menüpunkt darf kürzer sein, muss aber erkennbar dieselbe Sache benennen.

Wichtig ist die Gegenrichtung: Das Kriterium verlangt keine Einheitlichkeit dort, wo sich Funktionen unterscheiden. Zwei Knöpfe, die verschiedene Dinge tun, sollen verschieden heißen – alles andere wäre irreführend.

Der Normtext steht im Understanding-Dokument des W3C zu 3.2.4, das deutsche Prüfvorgehen im Prüfschritt „3.2.4 Konsistente Bezeichnung“.

Wen betrifft es besonders?

Sprachsteuerungs-Nutzende sind die Gruppe, für die dieses Kriterium am unmittelbarsten wirkt. Der Befehl lautet „Klicke Suchen“ – und er trifft das Element, dessen zugänglicher Name „Suchen“ lautet. Heißt der Knopf auf der nächsten Seite „Los“, funktioniert der Befehl nicht mehr. Es geht dabei nicht um Komfort: Wer ausschließlich per Stimme arbeitet, kann nicht „irgendwie anders“ klicken.

Menschen mit kognitiven Einschränkungen bauen auf erlernte Muster. Jede neue Bezeichnung für dieselbe Sache erzeugt die Frage „Ist das dasselbe?“ – und diese Frage kostet Zeit, Konzentration und im Zweifel den Abbruch des Vorgangs. Der Prüfschritt begründet das Kriterium genau damit: Klare, durchgängig verwendete Bezeichnungen erleichtern das Verständnis.

Screenreader-Nutzende erkennen Funktionen ausschließlich über die Ansage. Optische Wiedererkennung – „das ist doch dieselbe Lupe“ – gibt es für sie nicht. Wenn der Name wechselt, ist es für sie ein anderes Element.

Und Menschen mit Vergrößerung sehen Icons oft nur unscharf oder ausschnittweise. Sie identifizieren Bedienelemente über den Text daneben – wenn der wechselt, hilft auch das vertraute Symbol nicht.

Richtig & falsch im Code

Der typische Verstoß entsteht durch Kopieren: dreimal dieselbe Lupe, dreimal ein anderes Label.

<!-- Falsch: dieselbe Funktion, drei Namen (Seite A, B, C) -->
<button aria-label="Suche starten">
  <svg aria-hidden="true"><!-- Lupe --></svg>
</button>

<button aria-label="Finden">
  <svg aria-hidden="true"><!-- Lupe --></svg>
</button>

<button aria-label="Los">
  <svg aria-hidden="true"><!-- Lupe --></svg>
</button>

<!-- Richtig: eine Funktion, ein Name, am besten als
     wiederverwendbare Komponente -->
<button type="button" aria-label="Suchen">
  <svg aria-hidden="true" focusable="false"><!-- Lupe --></svg>
</button>

Noch belastbarer wird es, wenn die Beschriftung sichtbar ist – dann stimmen sichtbarer Text und zugänglicher Name automatisch überein, und 2.5.3 Beschriftung im Namen ist gleich mit erfüllt:

<!-- Am besten: sichtbarer Text plus Symbol -->
<button type="button">
  <svg aria-hidden="true" focusable="false"><!-- Lupe --></svg>
  Suchen
</button>

Ein Fall, der oft übersehen wird: Der zugängliche Name überschreibt sichtbaren Text, wenn aria-label gesetzt ist. Dann sagt der Screenreader etwas anderes, als auf dem Knopf steht – und die Sprachsteuerung findet ihn nicht mehr:

<!-- Falsch: sichtbar steht „Herunterladen", angesagt wird „PDF" -->
<button aria-label="PDF">Herunterladen</button>

<!-- Richtig: sichtbarer Text bleibt Teil des Namens -->
<button>Jahresbericht 2026 herunterladen (PDF, 1,2 MB)</button>

Die strukturelle Lösung ist eine Komponente, die den Namen mitbringt:

{/* Richtig: ein zentraler Such-Knopf, überall eingebunden */}
---
const { klasse = '' } = Astro.props;
---
<button type="button" class={`such-knopf ${klasse}`} aria-label="Suchen">
  <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2" />
    <path d="M16 16 L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
  </svg>
</button>

Und die redaktionelle Seite: ein kurzes Glossar mit verbindlichen Begriffen für wiederkehrende Aktionen. Konsistenz ist zuerst eine Textentscheidung, dann eine technische. Mehr zu den Symbolen selbst unter Icons & SVGs.

So testest du es

1. Wiederkehrende Funktionen inventarisieren: Suche, Warenkorb, Herunterladen, Drucken, Teilen, Schließen, Filtern, Sortieren, Anmelden, Weiter, Zurück.
2. Für jede Funktion die Beschriftungen über mehrere Seiten sammeln – Startseite, Übersichtsseite, Detailseite, Formularstrecke, Fußbereich.
3. Die zugänglichen Namen prüfen, nicht nur den sichtbaren Text. Das Accessibility-Panel der DevTools zeigt ihn je Element.
4. Menüeinträge gegen die Überschriften der Zielseiten legen. Passt der kurze Menüpunkt zur H1 der Seite, auf die er führt?
5. Icons ohne Text sammeln und prüfen, ob dasselbe Symbol überall dieselbe Bedeutung hat.
6. Mit Sprachsteuerung gegenprüfen: Funktioniert derselbe Befehl auf allen Seiten? Das ist der praxisnächste Test für dieses Kriterium.
7. Ein Redaktionsglossar anlegen und im Freigabeprozess verankern – siehe Cheat Sheets & Checklisten.

Häufiger Fehler in der Praxis

Der häufigste Fehler entsteht durch Zuständigkeiten. Der Shop kommt aus einem System, das Redaktionsportal aus einem anderen, die Kampagnenseiten von einer Agentur. Jede Quelle bringt ihre eigene Sprache mit: „In den Warenkorb“, „Jetzt kaufen“, „Hinzufügen“. Technisch ist keine Seite falsch – zusammengenommen sind sie es. Ich würd solche Fälle nicht über Code lösen, sondern über eine Begriffsliste, die für alle drei Quellen gilt.

Der zweite ist das Icon ohne Label im Fußbereich. Im Kopfbereich hat die Lupe ein sauberes aria-label, weil dort jemand hingeschaut hat. Im Fußbereich steht dieselbe Lupe als reines SVG in einem Link – ohne Namen. Für Screenreader heißt sie dann „Link“, für die Sprachsteuerung existiert sie nicht.

Der dritte ist der Menüpunkt, der anders heißt als die Zielseite. Im Menü steht „Kontakt“, die Seite heißt „Schreiben Sie uns“. Für die meisten ist das kein Problem – für Menschen, die auf Wiedererkennung angewiesen sind, ist es die Frage, ob sie richtig sind. Der Prüfschritt fragt genau danach. Der Fix ist redaktionell und kostet nichts.

Und der vierte, der bei gewachsenen Anwendungen fast sicher auftritt: das Mehrzweck-Icon. Das Häkchen bedeutet in der Aufgabenliste „erledigt“, in der Tabelle „ausgewählt“ und im Formular „gültig“. Drei Bedeutungen, ein Symbol. Das ist keine Frage der Beschriftung mehr, sondern eine des Entwurfs – und die Beschriftung kann es nicht heilen.

Häufige Fragen

Müssen Icons überall gleich aussehen?

Sie müssen dieselbe Bedeutung haben und denselben Namen haben. Kleine gestalterische Unterschiede – gefüllt statt umrissen, größer statt kleiner – sind unkritisch, solange Funktion und Bezeichnung gleich bleiben. Kritisch wird es, wenn dasselbe Symbol an verschiedenen Stellen verschiedene Dinge bedeutet.

Darf ein Knopf auf verschiedenen Seiten anders heißen?

Nur wenn er etwas anderes tut. Das Kriterium verlangt Gleichheit ausschließlich bei gleicher Funktion. Ein „Weiter“ im Bestellprozess und ein „Weiter“ in einer Bildergalerie sind unterschiedliche Funktionen und dürfen sich unterscheiden – besser noch, sie sollten es, damit klar ist, was passiert.

Muss der Menüeintrag zur Überschrift der Zielseite passen?

Der deutsche Prüfschritt fragt ausdrücklich danach. Er darf kürzer sein, muss aber erkennbar dieselbe Sache benennen. „Leistungen“ als Menüpunkt und „Unsere Leistungen“ als Überschrift ist unproblematisch; „Leistungen“ und „Was wir für Sie tun können“ ist eine Inkonsistenz.

Was ist der Unterschied zu 2.5.3 Beschriftung im Namen?

2.5.3 verlangt, dass der sichtbare Text im zugänglichen Namen enthalten ist – innerhalb eines einzigen Elements. 3.2.4 verlangt, dass dasselbe Element auf verschiedenen Seiten gleich bezeichnet ist. Beide zusammen sorgen dafür, dass Sprachsteuerung zuverlässig funktioniert.

Gilt das Kriterium auch über Subdomains hinweg?

Es gilt innerhalb einer Gruppe zusammengehöriger Seiten. Wenn Shop und Hauptseite als ein Angebot auftreten – gleiches Erscheinungsbild, verlinkt, gemeinsame Navigation –, gehören sie zusammen, auch bei getrennten Domains. Ein völlig eigenständiges Angebot unter derselben Marke ist eine andere Gruppe.

Verwandte Themen

• 3.2.3 Konsistente Navigation – dieselbe Logik für die Anordnung
• 2.5.3 Beschriftung im Namen – sichtbarer Text und zugänglicher Name
• 4.1.2 Name, Rolle, Wert – woher der zugängliche Name überhaupt kommt
• Icons & SVGs – Symbole richtig beschriften
• Sprachsteuerung – warum Namen hier Befehle sind
• 2.4.6 Überschriften und Beschriftungen – Beschriftungen, die beschreiben