Eigenschaft Beziehung

`aria-label`

Stellt einen barrierefreien Namen als Zeichenkette bereit, wenn kein sichtbarer Text vorhanden ist. Nur verwenden, wenn keine Beschriftung auf dem Bildschirm existiert — ist sichtbarer Text vorhanden, wird aria-labelledby bevorzugt, damit der gesprochene Name mit dem übereinstimmt, was die Nutzenden sehen.

Wann zu verwenden

Wenn ein Steuerelement keinen sichtbaren Text hat — Schaltflächen mit reinen Symbolen, Suchfelder mit nur einer Lupe, Schließen-Schaltflächen (×), Icons für soziale Medien. Die in aria-label eingetragene Zeichenkette wird zum barrierefreien Namen des Elements, und Screenreader geben sie anstelle eines etwaigen Inhaltstexts bekannt.

Das native HTML-Äquivalent ist das <label>-Element für Formulareingaben oder sichtbarer Schaltflächentext. aria-label sollte nur dann eingesetzt werden, wenn keines von beidem möglich ist.

Verhalten

Das Attribut nimmt eine einzelne Zeichenkette entgegen. Was auch immer in aria-label steht, überschreibt jeden sichtbaren Text im Element — der barrierefreie Name ist das, was AT-Nutzende hören, ist aber für sehende Nutzende unsichtbar. Diese Asymmetrie ist die häufigste Ursache für Fehler bei diesem Attribut.

Die Zeichenkette wird nicht automatisch übersetzt. Unterstützt eine Website mehrere Sprachen, muss der Wert von aria-label wie jede andere UI-Zeichenkette lokalisiert werden. Screenreader behandeln den Wert als Klartext — kein HTML, keine Zeilenumbrüche, keine Auszeichnung.

Enthält das Element sichtbaren Text, sollte stattdessen aria-labelledby verwendet werden, das auf diesen Text zeigt, damit sichtbare Beschriftung und barrierefreier Name synchron bleiben.

Häufige Fehler

aria-label="Hier klicken" auf eine Schaltfläche setzen, die bereits „Bestellung absenden“ anzeigt — der sichtbare Text ist für assistive Technologie damit verborgen, und die Nutzenden hören das Falsche.
WCAG 2.5.3 „Label in Name“ verletzen: aria-label="Absenden" auf einer Schaltfläche, deren sichtbarer Text „Bestellung senden“ lautet — Sprachsteuerungs-Nutzende können nicht „klicke Bestellung senden“ sagen, um die Schaltfläche zu betätigen.
aria-label auf ein nicht-interaktives Element wie <div> oder <span> anwenden — die meisten Browser ignorieren es, da das Element keine Rolle hat, die einen Namen unterstützt.
Den Wert unübersetzt lassen, obwohl der Rest der Seite in einer anderen Sprache ist.
aria-label anstelle eines echten <label> auf einem Formularfeld verwenden und damit die Möglichkeit verlieren, durch Klick auf die Beschriftung den Fokus auf das Feld zu setzen.
Anweisungen in aria-label statt in aria-describedby unterbringen. Der Name sollte kurz sein; Hilfetext gehört in die Beschreibung.

Beispiel

<!-- Nur-Symbol-Schaltfläche: kein sichtbarer Text, aria-label ist erforderlich -->
<button type="button" aria-label="Dialog schließen">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- Sichtbarer Text + Symbol: aria-label hier NICHT verwenden -->
<button type="button">
  <svg aria-hidden="true" focusable="false">…</svg>
  Dialog schließen
</button>