2.5.3 Label in Name

WCAG – Definition

Wenn ein UI-Element (z. B. Button, Link, Formularfeld) eine sichtbare Beschriftung hat, dann muss diese auch im zugänglichen Namen (Accessible Name) enthalten sein.

Heißt: Was der Nutzer sieht („Suche“) muss auch das sein, was Screenreader oder Sprachsteuerung hören/verstehen.

Bedeutung

  • Menschen, die Sprachsteuerung nutzen, sagen Dinge wie „Klicke Suche“. Wenn der zugängliche Name aber „Lupe“ ist, funktioniert es nicht.

  • Screenreader-Nutzer hören so den gleichen Text, den auch Sehende sehen.

  • Konsistenz = bessere Verständlichkeit für alle.

Ausreichende Techniken

Sichtbarer Text = Accessible Name

<button>Suche</button>

Screenreader liest „Suche“ – identisch zum Sichtbaren

Accessible Name erweitern

<button aria-label="Suche starten">Suche</button>

Screenreader liest „Suche starten“ (enthält das Wort „Suche“)

Bild mit Alt-Text (sichtbarer Text im Accessible Name enthalten)

<a href="/search">
  <img src="search.png" alt="Suche">
</a>

Screenreader liest „Suche“

aria-labelledby nutzen

<button id="searchBtn" aria-labelledby="searchBtn labelSearch">
  <span id="labelSearch">Suche</span>
</button>

Label „Suche“ wird als Accessible Name genutzt.

Advisory Techniques

  • Vermeide Abweichungen: sichtbarer Text = Screenreader-Text.

  • Zusätze möglich: du kannst Screenreadern mehr Kontext geben, solange das sichtbare Wort enthalten ist (z. B. „Suche auf der Website“).

  • Konsistenz wahren: gleiche Funktion immer gleich benennen („Anmelden“ ≠ „Login“ auf derselben Website).

  • Sprache beachten: keine englischen Begriffe im Aria-Label, wenn der sichtbare Text deutsch ist.

Fehler

Unterschiedliche Beschriftungen:

<button aria-label="Lupe">Suche</button>

Nur Icon ohne Text:

<button aria-label="Suchen"></button>

Screenreader liest „Suchen“, aber Nutzer sieht gar keinen Text → inkonsistent.