Dieses WCAG-Kriterium verlangt folgendes: Wenn ein Steuerelement (z. B. ein Button, ein Eingabefeld) eine sichtbare Beschriftung hat, dann muss auch sein von einer Software wie einem Screenreader ermittelbarer Name (zugänglicher Name) den Text dieser sichtbaren Beschriftung enthalten. Eine Abweichung kann zum Beispiel beim Einsatz eines aria-label-Attributs passieren. In diesem Fall enthält das aria-label den zugänglichen Namen und dieser weicht möglicherweise vom sichtbaren Text ab.
Beispiel: Stell dir vor, du hast einen Button mit der sichtbaren Beschriftung „Suchen“. Damit Sprachsteuerung und Screenreader denselben Begriff erkennen, sollte der zugängliche Name ebenfalls „Suchen“ enthalten. Ein korrektes Beispiel wäre:
<button aria-label="Suchen">Suchen</button>Hier stimmt die sichtbare Beschriftung mit dem im Code hinterlegten Namen überein; so können Nutzende, die per Spracheingabe „Klicke Suchen“ sagen oder Screenreader verwenden, den Button problemlos finden und bedienen.
Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.5.3
Hier kommen von uns noch ein paar Tipps und Infos zur Umsetzung des WCAG-Kriteriums 2.5.3:
- Achte darauf, dass der sichtbare Text eines Labels im zugänglichen Namen auftaucht, z. B. durch Nutzung von label-Element in HTML, oder via aria-labelledby oder aria-label, sodass Screenreader und Sprachsteuerung ihn erkennen.
- Der sichtbare Label-Text sollte möglichst am Anfang des zugänglichen Namens stehen.
- Vermeide, dass das aria-label den Namen überschreibt bzw. den sichtbaren Label-Text weglässt, wenn ein sichtbares Label vorhanden ist.
- Stell sicher, dass Labels richtig verknüpft sind (z. B. mit dem For-Attribut bei label und dem id des Eingabefelds) und dass damit der zugängliche Name aus dem Label abgeleitet wird.
- Vermeide, Labels nur über Platzhaltertexte bereitzustellen, denn Platzhalter allein gelten nicht als sichtbare Beschriftung im Sinne dieses Kriteriums.
- Wenn ein Symbol/Icon verwendet wird (z. B. statt Text), sorge dafür, dass ein klarer, verständlicher Textname existiert, der die Funktion ausdrückt; das Icon darf nicht allein sein.
Bei Fragen beraten wir dich gerne. Mehr Infos zu diesem Kriterium findest du auch auf der folgenden englischen WAI-Seite zum WCAG-Kriterium 2.5.3 Beschriftung (Label) im Namen.