3.2.4 Konsistente Identifizierung (Consistent Identification)

WCAG – Definition

Komponenten, die innerhalb einer Gruppe von Webseiten dieselbe Funktion haben, werden einheitlich identifiziert.

Bedeutung

Wenn eine Komponente (z. B. ein Button, Link, Symbol, Icon oder Formularfeld) mehrfach auf einer Website oder innerhalb einer App vorkommt und dieselbe Funktion erfüllt, dann muss sie auch immer gleich bezeichnet und dargestellt werden.

Nutzer*innen mit kognitiven Einschränkungen oder Screenreader-Benutzende können sich darauf verlassen, dass ein Symbol oder Label immer die gleiche Funktion meint.

Vermeidet Verwirrung, wenn Elemente inkonsistent benannt oder dargestellt werden.

Beispiel:

  • Ein Lupen-Symbol steht überall für „Suche“.

  • Ein Warenkorb-Symbol ist nicht einmal „Warenkorb“ und an anderer Stelle „Bestellen“.

Ausreichende Techniken

1. Einheitliche Labels und Texte

<!-- Schlecht: unterschiedliche Bezeichnungen -->
<a href="/cart">Warenkorb</a>
<a href="/cart">Bestellen</a>

<!-- Gut: konsistente Bezeichnung -->
<a href="/cart">Warenkorb</a>
<a href="/cart">Warenkorb</a>

Programmierer sollten darauf achten, dass IDs, aria-label, alt oder title konsistent sind.

Einheitliche Icons mit Textalternativen

  • Problem: Einmal wird ein Zahnrad-Icon mit Einstellungen beschriftet, an anderer Stelle mit Optionen.

  • Lösung: Einheitliches Icon + konsistenter Alternativtext.

<!-- Einheitliche Nutzung -->
<button aria-label="Einstellungen">
  <span class="icon-settings" aria-hidden="true"></span>
</button>

Wiederkehrende Formularfelder gleich benennen

Felder wie „E-Mail-Adresse“ sollten auf jeder Seite gleich beschriftet werden, nicht einmal „E-Mail“ und woanders „Ihre Adresse“.

<!-- Konsistent -->
<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email">

Semantische Konsistenz durch Rollen/ARIA

Wenn Komponenten über role oder aria beschrieben werden, sollte dies konsistent erfolgen.

<!-- Schlecht -->
<div role="button" aria-label="Anmelden">Login</div>
<div role="button" aria-label="Einloggen">Login</div>

<!-- Gut -->
<div role="button" aria-label="Anmelden">Anmelden</div>

 

Beratungstechniken

  • Design-Guidelines erstellen: Definiere für die Website oder App einheitliche Benennungen von Buttons, Formularfeldern, Icons.

  • Komponentenbibliothek nutzen: In React, Vue oder Contao/WordPress mit wiederverwendbaren Komponenten arbeiten, damit nicht jeder Entwickler eigene Labels vergibt.

  • Content-Strategie: Auch Texter müssen darauf achten, dass gleiche Funktionen gleich betitelt werden.

  • Testing mit Nutzer*innen: Menschen mit Screenreader oder kognitiven Einschränkungen können Inkonsistenzen sofort aufdecken.

Fehler

  • Unterschiedliche Benennung für gleiche Funktion
    • Mal „Suche“, mal „Finden“.
    • Mal „Warenkorb“, mal „Bestellen“.
  • Unterschiedliche Icons für gleiche Funktion
    • Beispiel: Suche einmal mit Lupe, einmal mit Fernglas dargestellt.
  • Uneinheitliche ARIA-Labels
  • Button hat auf einer Seite aria-label="Anmelden" und auf einer anderen aria-label="Login".
  • Formularfelder mit variierenden Labels
  • „Telefonnummer“ vs. „Ihre Rufnummer“ → führt zu Verwirrung.