Kostenloser Scan

20. Oktober 2026

aria-label: wann verwenden und wann besser nicht

Wann sollten Sie aria-label verwenden? Dann, wenn ein Element keinen oder einen ungenauen zugänglichen Namen hat und kein sichtbarer Inhalt im DOM referenziert werden kann, um es zu benennen. aria-label richtet sich vor allem an assistive Technologien wie Screenreader. Das Paradebeispiel ist ein Button, der nur ein SVG-Icon enthält. Gibt es bereits sichtbaren Text, der das Element beschriftet, verweisen Sie besser darauf; und bei einigen strukturellen Rollen wird aria-label schlicht nicht unterstützt. Dieser Leitfaden zeigt, was das Attribut tut, wann es hilft, wann es schadet und wie die erste Regel von ARIA greift, mit Codebeispielen (eines davon von MDN), gestützt auf die MDN-Dokumentation und, für die erste Regel von ARIA, auf das W3C-Dokument „Using ARIA“.

Was das Attribut aria-label macht

Laut MDN definiert aria-label eine Zeichenkette, mit der ein Element benannt werden kann, sofern seine Rolle die Benennung nicht verbietet. Der Wert ist einfacher Text und wird zum zugänglichen Namen des Objekts.

Die meisten Inhalte erhalten bereits ohne ARIA einen zugänglichen Namen. Standardmäßig ist der Name eines Buttons der Inhalt zwischen <button> und </button>, der eines Bildes der Wert seines alt-Attributs und der eines Formularfelds der Text des zugehörigen <label>-Elements. aria-label sollte nur dann zum Einsatz kommen, wenn keine dieser Möglichkeiten verfügbar ist oder der Standardname nicht passt.

Beachten Sie: Der Inhalt von aria-label wird außerhalb assistiver Technologien nicht angezeigt. MDN rät deshalb, wichtige Informationen für alle sichtbar zu machen.

Wann aria-label verwenden: Icon-Buttons und Landmarks

Der klassische Fall ist ein Button, der nur ein Icon enthält. Ohne Text hat er keinen zugänglichen Namen, und Screenreader-Nutzer können nicht erkennen, wozu er dient. Im folgenden MDN-Beispiel enthält der Button nur ein SVG-Icon, und aria-label="Close" („Schließen“) gibt seine Funktion an; wir haben es ins Deutsche übertragen. Das SVG trägt aria-hidden="true" und focusable="false".

MDN weist darauf hin, dass aria-label zwar grundsätzlich auf jedem Element verwendet werden kann, das einen zugänglichen Namen haben kann, in der Praxis aber nur auf interaktiven Elementen, Widgets, Landmarks, Bildern und iframes unterstützt wird. Gedacht ist es unter anderem für Links, Videos, Formularelemente sowie Elemente mit Landmark- oder Widget-Rolle, wenn im DOM kein sichtbares Label existiert.

Bei Landmarks können Sie mit aria-label ein Element mit Landmark-Rolle benennen, wenn im DOM kein sichtbares Label vorhanden ist. Gibt es sichtbaren Text, der es beschriftet, verweisen Sie stattdessen mit aria-labelledby darauf, wie weiter unten erklärt.

<!-- Icon-Button (nach dem MDN-Beispiel) -->
<button aria-label="Schließen">
  <svg aria-hidden="true" focusable="false" width="17" height="17"
       xmlns="http://www.w3.org/2000/svg">
    <path d="…" fill="black" />
  </svg>
</button>

Wann Sie aria-label nicht verwenden sollten

Erster Fall: Das Element hat bereits sichtbaren Text, der es beschriftet. MDN ist eindeutig: Gibt es sichtbaren Text, der ein Element beschriftet, verwenden Sie aria-labelledby. aria-label ist für Fälle gedacht, in denen der Text, der das Element benennen könnte, nicht sichtbar ist.

Zweiter Fall: HTML liefert den Namen bereits. Wenn Sie einem <iframe> ein title, einem <img> ein alt-Attribut oder einem <input> ein <label> gegeben haben, ist aria-label nicht nötig. Ist es trotzdem vorhanden, hat es als zugänglicher Name Vorrang vor dem title des iframes, dem alt des Bildes oder dem Text des <label>. Ein überflüssiges aria-label hat also Vorrang vor dem nativen Label.

Dritter Fall: bestimmte strukturelle Rollen, die keinen Namen erhalten können. Weder aria-label noch aria-labelledby sollten bei strukturellen Inline-Rollen wie code, term oder emphasis verwendet werden, noch bei Rollen, die nicht auf die Accessibility-API abgebildet werden, darunter none. MDN listet die Rollen auf, in denen aria-label nicht unterstützt wird:

<!-- Vermeiden: Das Label existiert, aria-label überschreibt es -->
<label for="email-1">E-Mail-Adresse</label>
<input id="email-1" type="email" aria-label="Feld">

<!-- Richtig: Das <label> genügt -->
<label for="email-2">E-Mail-Adresse</label>
<input id="email-2" type="email">

aria-label oder aria-labelledby?

Beide Attribute liefern einen zugänglichen Namen. Der Unterschied liegt in der Herkunft des Textes: aria-labelledby verweist auf Text, der bereits im DOM steht, aria-label enthält den Text selbst. MDN empfiehlt nachdrücklich, aria-labelledby den Vorzug zu geben, wenn ein sichtbares Label existiert und sich für eine akzeptable Nutzererfahrung referenzieren lässt. Gibt es keinen sichtbaren Namen, auf den Sie verweisen können, verwenden Sie aria-label.

Verwenden Sie nie beide auf demselben Element: aria-labelledby hat Vorrang vor aria-label, wenn beide gesetzt sind.

Und schließlich: aria-label ist nicht für Anweisungen gedacht. Um Hinweise zu ergänzen oder die Oberfläche zu erklären, empfiehlt MDN sichtbaren Text mit aria-describedby oder aria-description. Anweisungen sollten allen Nutzern zugänglich sein, nicht nur Screenreader-Nutzern, und noch besser ist eine intuitivere Oberfläche.

Die erste Regel von ARIA: natives HTML zuerst

Das W3C-Dokument „Using ARIA“ formuliert die erste Regel der ARIA-Nutzung so: Wenn Sie ein natives HTML-Element oder -Attribut verwenden können, das die benötigte Semantik und das benötigte Verhalten bereits mitbringt, dann tun Sie das, statt ein Element umzufunktionieren und ihm eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen.

Auf aria-label übertragen legt dieser Grundsatz nahe, zuerst die native Lösung zu suchen. MDN weist in dieselbe Richtung: Mit einem title auf einem <iframe>, einem alt auf einem <img> oder einem <label> für ein <input> ist aria-label nicht nötig. aria-label ist für Fälle gedacht, in denen kein nativer Name verfügbar ist oder der Standardname nicht passt und kein sichtbarer Text referenziert werden kann, wie beim Icon-Button oben.

Das W3C nennt drei Ausnahmen von dieser ersten Regel: Die Funktion ist in HTML vorhanden, aber nicht implementiert; Vorgaben des visuellen Designs schließen das native Element aus; oder die Funktion gibt es in HTML derzeit nicht. Die weiteren Regeln des Dokuments lauten: native Semantik nicht ändern, außer es ist wirklich nötig; alle interaktiven ARIA-Bedienelemente per Tastatur bedienbar machen; und kein role="presentation" oder aria-hidden="true" auf fokussierbare Elemente setzen.

Hinweis: „Using ARIA“ ist inzwischen als Discontinued Draft veröffentlicht (es soll weder weiterentwickelt noch gepflegt werden). Das W3C verweist für weitere Hinweise zum Einsatz von ARIA in Designmustern und Widgets auf den ARIA Authoring Practices Guide (APG).

aria-label in der Praxis prüfen

Gehen Sie bei einem Audit jedes Element mit aria-label durch und stellen Sie sich die folgenden Fragen, abgeleitet aus den obigen Empfehlungen.

Häufige Fragen

Wann sollte man aria-label verwenden?

Wenn ein Element keinen oder einen ungenauen zugänglichen Namen hat und kein sichtbarer Text im DOM es benennen kann, etwa bei einem Button, der nur ein Icon enthält. Der Wert wird zum zugänglichen Namen des Elements.

Was ist der Unterschied zwischen aria-label und aria-labelledby?

Beide liefern einen zugänglichen Namen. aria-labelledby verweist auf Text, der bereits im DOM steht; aria-label enthält den Text direkt. Bevorzugen Sie aria-labelledby, wenn ein sichtbares Label existiert, und verwenden Sie nicht beide zusammen: aria-labelledby hat Vorrang.

Kann man aria-label auf jedes HTML-Element setzen?

Nein, das hängt von der Rolle des Elements ab: aria-label ist für Elemente gedacht, deren Rolle die Benennung nicht verbietet. Laut MDN wird es bei Rollen wie generic, paragraph, strong, code oder mark nicht unterstützt. In der Praxis wird es jedoch nur auf interaktiven Elementen, Widgets, Landmarks, Bildern und iframes unterstützt.

Ersetzt aria-label das alt-Attribut eines Bildes?

Sind beide vorhanden, hat aria-label als zugänglicher Name Vorrang vor alt. Hat das Bild aber bereits ein alt, ist aria-label nicht nötig: Behalten Sie das native Attribut.

Was ist die erste Regel von ARIA?

Laut W3C gilt: Bietet ein natives HTML-Element oder -Attribut bereits die benötigte Semantik und das benötigte Verhalten, verwenden Sie es, statt ein Element umzufunktionieren und ihm eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen.

Weiterlesen bei Conformly

Quellen

Dieser Artikel stützt sich auf die am Seitenende genannten offiziellen Quellen.