WCAG 3.2.4: Konsistente Erkennung

Komponenten mit derselben Funktion müssen innerhalb einer Website konsistent identifiziert werden: gleicher Name, gleiche Beschriftung, gleiches Icon-Konzept. Die Suche heißt nicht hier „Suche“, dort „Finden“ und drüben „Los“. (Englisch: Consistent Identification.)

Was verlangt das Kriterium?

Erkennen ist Wiedererkennen. Wer einmal gelernt hat, dass das Lupen-Icon „Suchen“ heißt und der Pfeil nach unten „Herunterladen“, verlässt sich darauf – auf jeder Seite. Konsistenz gilt dabei für die ganze Identifikation:

• Sichtbare Beschriftung: „In den Warenkorb“ heißt überall so – nicht mal „Kaufen“, mal „Hinzufügen“.
• Zugängliche Namen: Das Lupen-Icon trägt überall dasselbe Label („Suchen“) – nicht mal „Suche“, mal „Absenden“, mal gar keins.
• Icon-Bedeutung: Ein Icon steht für eine Funktion. Das Häkchen, das hier „erledigt“ und dort „auswählen“ bedeutet, verwirrt doppelt.

Unterschiedliche Funktionen dürfen (und sollen!) unterschiedlich heißen – das Kriterium verlangt Gleichheit nur bei Gleichheit.

Wen betrifft es besonders?

Menschen mit kognitiven Einschränkungen, die auf erlernte Muster bauen; Screenreader-Nutzer, die per Ansage wiedererkennen; Sprachsteuerungs-Nutzer, deren gelerntes Kommando („Klicke Suchen“) überall funktionieren muss.

Richtig & falsch im Code

<!-- Falsch: dieselbe Funktion, drei Namen (Seite A, B, C) -->
<button aria-label="Suche starten">🔍</button>
<button aria-label="Finden">🔍</button>
<button aria-label="Los">🔍</button>

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

Die nachhaltige Lösung ist auch hier strukturell: Komponenten-Bibliothek statt Copy-Paste. Ein zentraler Such-Button, ein zentraler Download-Link – einmal richtig benannt, überall konsistent.

So testest du es

1. Wiederkehrende Funktionen inventarisieren (Suche, Warenkorb, Download, Drucken, Teilen, Schließen) und ihre Beschriftungen über mehrere Seiten vergleichen.
2. Zugängliche Namen prüfen (DevTools-Accessibility-Panel): identisch für identische Funktion?
3. Redaktions-Glossar pflegen: verbindliche Begriffe für wiederkehrende Aktionen – Konsistenz ist zuerst eine Text-Entscheidung.

Verwandte Themen

• 3.2.3 Konsistente Navigation – Konsistenz der Anordnung
• Icons & SVGs – Icons richtig beschriften
• 2.5.3 Beschriftung im Namen