Barrierefreiheit

Mehrere Buttons mit identischem zugänglichem Namen

Üblicher Schweregrad: niedrig · Aufwand: gering

Woran du es erkennst

Drei oder mehr Buttons ohne sichtbaren Text tragen denselben aria-label (z. B. viermal „CLICK TO CONTINUE“), obwohl sie vermutlich Verschiedenes auslösen — in der Elementliste des Screenreaders und bei Sprachsteuerung sind sie nicht zu unterscheiden (WCAG 2.4.6, 4.1.2).

Warum es zählt

Ohne sichtbaren Text ist der zugängliche Name die einzige Beschriftung. Identische Namen machen die Buttons ununterscheidbar: Sprachsteuerung kann keinen gezielt ansprechen, und ein Screenreader-Nutzer hört viermal dasselbe Wort, ohne zu wissen, was wo weitergeht. Das Gegenstück für Links ist a11y-link-purpose-generic.

So behebst du es

  1. Gib jedem Button einen eindeutigen zugänglichen Namen, der Aktion oder Gegenstand nennt („Weiter zu Projekt X“).
  2. Alternativ je Button einen sichtbaren Text ergänzen oder aria-labelledby auf die Überschrift der zugehörigen Karte verweisen lassen.
  3. Einen generischen Namen nur dort lassen, wo die Buttons im selben Kontext wirklich dasselbe tun (z. B. Karussell-Pfeile mit aria-controls).
  4. Prüfe mit der Elementliste des Screenreaders oder per Sprachsteuerung („Klicke …“): Jeder Eintrag muss eindeutig sein.

Zum Nachlesen