2.5.3 Beschriftung im Namen

Was bedeutet das?

Wer seinen Computer per Sprache steuert, sagt einfach, was er sieht, etwa „Klick In den Warenkorb“. Das klappt nur, wenn der Name, den das Element im Code trägt, diesen sichtbaren Text auch enthält. Weicht ein aria-label davon ab, findet die Sprachsteuerung den Knopf nicht.

Der Name darf mehr enthalten als die sichtbare Beschriftung, etwa „In den Warenkorb: Wanderschuh Alpin“. Der sichtbare Text sollte dabei am Anfang stehen. Bei Symbolen ohne Text greift dieses Kriterium nicht, dort zählt ein sinnvoller Name nach Kriterium 4.1.2.

Wem hilft das?

• Menschen, die Ihre Website per Sprachsteuerung bedienen
• Screenreader-Nutzer mit Sehrest, die Gehörtes und Gesehenes abgleichen
• Menschen mit kognitiven Einschränkungen, die einheitliche Bezeichnungen brauchen

Typische Fehler

• Ein Knopf zeigt „Senden“, hat aber aria-label="Formular übermitteln"
• Ein Link zeigt „Mehr erfahren“, das aria-label lautet nur „Produktdetails“
• Ein Feld ist sichtbar mit „E-Mail“ beschriftet, im Code aber mit einem anderen Namen versehen

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.

Prüffrage: Der zugängliche Name enthält den sichtbaren Beschriftungstext (wichtig für Sprachsteuerung).

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<button type="submit" aria-label="Formular übermitteln">
  Senden
</button>

<button type="submit">Senden</button>

<button type="button" aria-label="In den Warenkorb: Wanderschuh Alpin">
  In den Warenkorb
</button>

Der zugängliche Name beginnt mit dem sichtbaren Text, sodass ein Sprachbefehl mit genau diesen Worten den Knopf trifft.

Praxistipps

• Verzichten Sie auf aria-label, wenn der sichtbare Text bereits gut ist; der Text selbst ist dann der Name.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 2.5.3 Label in Name