aria-label: Elemente richtig benennen
Also called: ARIA-Label, aria-label-Attribut, Unsichtbare Beschriftung
Definition
aria-label ist ein ARIA-Attribut, das den zugänglichen Namen eines Elements als Text festlegt. Screenreader sagen diesen Namen statt des Elementinhalts an – deshalb wird es vor allem für Bedienelemente ohne sichtbaren Text verwendet, etwa Icon-Buttons.
aria-label ist ein HTML-Attribut aus der ARIA-Spezifikation, das einem Element einen zugänglichen Namen als reinen Text gibt. Ein Screenreader sagt ihn an, etwa „Dialog schließen, Schalter“ für ein „ד-Symbol. Es ist die schnellste Lösung für Bedienelemente ohne sichtbaren Text – und eines der am häufigsten falsch eingesetzten Attribute, wenn bereits sichtbarer Text vorhanden ist.
Was es bedeutet
WCAG 4.1.2 Name, Rolle, Wert (Stufe A, WCAG 2.2) verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen. Als hinreichende Technik nennt das W3C ARIA14: aria-label, um einen zugänglichen Namen bereitzustellen, wo keine sichtbare Beschriftung möglich ist. Die Formulierung ist entscheidend: aria-label ist für Fälle gedacht, in denen eine sichtbare Beschriftung nicht geht.
Drei Dinge sollten Sie über das Attribut wissen:
| Tatsache | Folge |
|---|---|
| Es überschreibt den eigenen Text des Elements | <a aria-label="Mehr lesen">Versandbedingungen</a> wird als „Mehr lesen“ angesagt – der sichtbare Text zählt nicht |
aria-labelledby hat Vorrang |
Sind beide gesetzt, ist der verknüpfte Text der Name |
| Es ist unsichtbar | Sehende Menschen sehen es nie, Fehler fallen daher kaum auf |
Es wirkt bei interaktiven Elementen (Links, Buttons, Formularfelder), bei Landmarks wie <nav> und bei role="img". Auf einem einfachen div oder span ohne Rolle erlaubt ARIA keine Benennung – viele Screenreader ignorieren das Label dort.
Praxisbeispiele
<!-- Gut: Button nur mit Symbol -->
<button aria-label="Dialog schließen">
<svg aria-hidden="true">…</svg>
</button>
<!-- Gut: zwei Navigationen unterscheiden -->
<nav aria-label="Hauptmenü">…</nav>
<nav aria-label="Fußzeile">…</nav>
<!-- Schlecht: Label widerspricht dem sichtbaren Text -->
<a href="/versand" aria-label="Hier klicken">Versandbedingungen</a>aria-label für Icon-Buttons, Suchfelder ohne sichtbare Beschriftung und zur Unterscheidung mehrerer gleichartiger ARIA-Landmarks verwenden. Die Aktion beschreiben („Menü öffnen“), nicht das Symbol („Hamburger“). Das Symbol selbst mit aria-hidden="true" ausblenden.
aria-label auf Elemente setzen, die bereits einen guten sichtbaren Text haben, es auf einem einfachen div oder span verwenden, es für die Suchmaschinenoptimierung mit Keywords füllen oder es anstelle eines echten <label> bei Formularfeldern einsetzen, die Platz für eine Beschriftung haben.
So prüfen Sie aria-label
Häufige Fragen
Was ist der Unterschied zwischen aria-label und aria-labelledby?
aria-label enthält den Namen als Text im Attribut. aria-labelledby verweist auf die ID eines anderen Elements, dessen sichtbarer Text zum Namen wird. Nutzen Sie aria-labelledby, wenn der Text bereits auf der Seite steht.
Ersetzt aria-label den sichtbaren Linktext?
Ja. Für assistive Technologien überschreibt aria-label den Inhalt des Elements. Deshalb verwirrt ein Label, das vom sichtbaren Text abweicht, Screenreader- und Sprachsteuerungsnutzer.
Hilft aria-label bei der Suchmaschinenoptimierung?
Nein. aria-label ist für assistive Technologien gedacht. Versteckte Keywords machen die Seite schwerer bedienbar und haben dort nichts zu suchen.
Kann ich aria-label auf einem div verwenden?
Nur, wenn das div eine Rolle hat, die einen Namen erlaubt, etwa role="region" oder role="img". Auf einem allgemeinen div oder span ohne Rolle verbietet ARIA die Benennung, und viele Screenreader ignorieren sie.
Wie finde ich Symbole ohne Namen auf meiner Website?
Der kostenlose WCAG-Scanner prüft Ihre Startseite nach WCAG 2.2 AA – einschließlich Links und Buttons ohne zugänglichen Namen.
Related terms
Zugänglicher Name: Was er ist und woher er kommt
Der zugängliche Name ist der Text, den der Browser an assistive Technologien weitergibt, um ein Element zu benennen – etwa die Worte, die ein Screenreader für einen Button, Link oder ein Formularfeld ansagt. WCAG 4.1.2 verlangt für jedes Bedienelement einen programmatisch ermittelbaren Namen.
Read definition: Zugänglicher Name: Was er ist und woher er kommtARIA: Rollen, Zustände und Eigenschaften erklärt
ARIA (WAI-ARIA, Accessible Rich Internet Applications) ist eine W3C-Spezifikation für HTML-Attribute – Rollen, Zustände und Eigenschaften –, die assistiven Technologien mitteilen, was ein eigenes Element ist, wie es heißt und in welchem Zustand es sich befindet.
Read definition: ARIA: Rollen, Zustände und Eigenschaften erklärtIcon-Button: So geben Sie ihm einen Namen
Ein Icon-Button ist eine Schaltfläche, die nur ein Symbol zeigt – Lupe, Kreuz, drei Striche – und keinen sichtbaren Text. Barrierefrei ist er erst mit einem zugänglichen Namen im Code, der Hilfstechnologien sagt, was er bewirkt.
Read definition: Icon-Button: So geben Sie ihm einen NamenLeerer Button: Fehler verstehen und beheben
Ein leerer Button ist eine Schaltfläche ohne zugänglichen Namen – ohne Text, ohne aria-label und ohne Alternativtext im enthaltenen Bild. Screenreader sagen nur „Schalter“ an, nicht aber, was er bewirkt.
Read definition: Leerer Button: Fehler verstehen und beheben