Was ist aria-label und warum ist es wichtig?
Häufige Fehler beim Einsatz von aria-label
Accessible Name Computation – Priorität und Reihenfolge
Wann aria-label verwenden — Anwendungsfälle
Syntax & Beispiele – Konkrete Code-Snippets
aria-label vs. aria-labelledby vs. aria-describedby vs. title vs. alt
Testing und Kontrolle von aria-labels
Nicht jedes Bedienelement auf einer Website hat automatisch eine sichtbare Beschriftung. Denken Sie an Buttons mit einem Lupen-Icon für die Suche oder an einHamburger-Menü-Symbol. Für sehende Nutzer ist die Funktion durch das Symbol klar, für Screenreader-Nutzer bleibt das Element ohne Zusatzinformationen jedoch unsichtbar.
Hier kommt aria-label ins Spiel: Es ergänzt Elemente um einen zugänglichen Namen, den Screenreader vorlesen. So wissen auch Menschen mit Sehbehinderung, dass ein Button mit dem Symbol einer Lupe tatsächlich die Suche öffnet.
aria-label ist ein Attribut aus den WAI-ARIA-Spezifikationen. Es wird direkt am HTML-Element angegeben und weist diesem einen zugänglichen Namen zu.
Ein einfaches Beispiel:
HTML
<button aria-label=“Suche öffnen“>
<svg class=“icon-search“></svg>
</button>
Für sehende Nutzer ist nur das Icon sichtbar. Für Screenreader-Nutzer wird zusätzlich „Suche öffnen“ vorgelesen, womit das Bedienelement für alle verständlich wird.
Beispiel von amazon. Die Lupe zur Suche ist mit dem aria-label “Los” versehen.
aria-label ist ein mächtiges Werkzeug, sollte aber immer bewusst und sparsam eingesetzt werden.
1. Nur nutzen, wenn kein sichtbarer Text vorhanden ist
Ist es nicht möglich, Bedienelemente mit echtem Text zu versehen (etwa bei reinen Icon-Buttons), sorgt aria-label dafür, dass Screenreader den Zweck klar vermitteln können.
2. Beschreibungen kontextbezogen formulieren
Die Bezeichnung sollte den Zweck des Elements beschreiben – nicht das Aussehen. Ein Button mit einem Plus-Symbol sollte nicht aria-label=“Plus“, sondern aria-label=“Neues Element hinzufügen“ tragen.
3. Keine redundanten Informationen
Wenn ein Button schon sichtbaren Text enthält, sollte dieser nicht zusätzlich über aria-label wiederholt werden. Dies ist überflüssig und kann dazu führen, dass Screenreader den Text doppelt vorlesen und Nutzer verwirren.
4. Kombination mit anderen ARIA-Attributen
In komplexeren Anwendungen kann aria-label sinnvoll mit aria-labelledby oder aria-describedby kombiniert werden. aria-labelledby ist oft die bessere Wahl, wenn die Beschriftung bereits in einem sichtbaren Textelement vorhanden ist, und verweist auf dieses.
Typische Stolperfallen, die die Barrierefreiheit behindern, statt sie zu verbessern:
Screenreader und andere Assistive Technologien errechnen den Accessible Name eines Elements. Dieser Name bestimmt, was vorgelesen oder in Braille ausgegeben wird. Die Regeln dafür sind im W3C Accessible Name and Description Computation (Accname) festgelegt.
Die Berechnung folgt einer klaren Priorität:
Konkretes Beispiel zur Priorität
HTML
<button aria-label=“Suche öffnen“ aria-labelledby=“search-text“>
<svg class=“icon-search“></svg>
</button>
<span id=“search-text“>Produkte durchsuchen</span>
Da die Umsetzung von ARIA-Attributen in verschiedenen Screenreadern leicht variieren kann, gilt: unbedingt testen (z. B. mit NVDA unter Windows, VoiceOver auf Mac/iOS).
aria-label sollte gezielt eingesetzt werden, wenn kein sichtbarer Text oder semantisch passender Inhalt vorhanden ist.
Elemente, bei denen der sichtbare Text unzureichend ist: Manchmal ist zwar Text vorhanden, aber er beschreibt die Funktion nicht eindeutig. Hier kann ein gezieltes aria-label die Barrierefreiheit verbessern.
aria-label wird direkt im HTML-Element angegeben:
HTML
<button aria-label=“Menü öffnen“></button>
In diesem Fall liest der Screenreader „Menü öffnen“, auch wenn der Button nur ein Symbol enthält.
Ein weiterer typischer Anwendungsfall sind Formulareingaben ohne sichtbares Label. Statt einen Text im Layout einzublenden, kann ein aria-label die Eingabe beschreiben:
HTML
<input type=“text“ aria-label=“E-Mail-Adresse eingeben“>
Bei komplexeren Elementen wie Custom Widgets kann aria-label zusammen mit anderen ARIA-Attributen verwendet werden:
HTML
<div role=“slider“ aria-label=“Bewertung auswählen“ aria-valuemin=“1″ aria-valuemax=“5″></div>
Jedes Attribut hat eine eigene Rolle bei der Bereitstellung von Informationen:
Attribut | Funktion | Priorität (beim Namen) |
aria-label | Vergibt einem Element einen unsichtbaren, aber vorlesbaren Namen. Ideal für Icons ohne sichtbaren Text. | Zweithöchste |
aria-labelledby | Verknüpft ein Element mit einem sichtbaren Textelement (ID-Referenz). | Höchste |
aria-describedby | Liefert zusätzliche Informationen, die über den reinen Namen hinausgehen (Beschreibung, nicht Name). | Wird nach dem Namen vorgelesen |
title | Zeigt beim Überfahren mit der Maus einen Tooltip an. Nicht zuverlässig für Screenreader. | Niedrigste |
alt | Beschreibt den Bildinhalt für Screenreader und bei Ladeproblemen. Speziell für <img>-Tags. | Speziell für Bilder |
Praktisches Testen ist unerlässlich, um sicherzustellen, dass alle Nutzer die Inhalte korrekt wahrnehmen.
aria-label ist ein zentrales Werkzeug, um interaktive Elemente barrierefrei zu machen, insbesondere wenn sichtbarer Text fehlt.
Wichtige Kernpunkte:
Wer diese Punkte beachtet, erhöht die Barrierefreiheit, verbessert die Nutzererfahrung und stellt sicher, dass alle Inhalte auf der Website für jeden zugänglich bleiben.
Verwenden Sie aria-label, wenn ein interaktives Element – wie ein Button oder Link – keinen sichtbaren Text hat, der seine Funktion beschreibt. Ein typisches Beispiel sind Buttons, die nur aus einem Icon bestehen.
Nein. Sichtbare Labels sind immer die beste Lösung für Barrierefreiheit. aria-label ist eine Ergänzung und sollte nur dann eingesetzt werden, wenn ein sichtbarer Text aus Design- oder anderen Gründen nicht möglich ist.
Sie können beide Attribute setzen, aber aria-labelledby hat eine höhere Priorität. Der Screenreader wird den Text von aria-labelledby vorlesen und aria-label ignorieren.
Das kann mehrere Gründe haben. Möglicherweise hat ein anderes Attribut wie aria-labelledby eine höhere Priorität. Prüfen Sie auch, ob das Element ein korrektes role-Attribut hat oder ob es sich um ein rein dekoratives Element handelt.
Nein. Für Bilder ist der Alt-Text der richtige Weg, um eine Beschreibung zu hinterlegen. aria-label sollte nur für interaktive Elemente wie Buttons oder Links verwendet werden.
Ob gesetzliche Anforderungen, technische Details oder allgemeine Orientierung – unsere Expert:innen beraten Sie persönlich, unkompliziert und kostenlos und zeigen Ihnen auch unsere Softwarelösung im Detail.
Sie sehen gerade einen Platzhalterinhalt von Google Maps. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen
