Das Attribut aria-label gibt einem Element einen zugänglichen Namen, also die Bezeichnung, die Screenreader beim Fokussieren ansagen. Es ersetzt dabei den sichtbaren Textinhalt des Elements, ohne die visuelle Darstellung zu verändern.
Die Hauptfunktion von ARIA-Labels besteht darin, alternative textuelle Beschreibungen für Inhalte bereitzustellen. Dies ist besonders relevant bei:
Buttons ohne sichtbaren Text
Icons oder Symbol-Buttons
Komplexen Bedienelementen wie Slidern oder Custom-Controls
Elementen, deren sichtbarer Text nicht ausreichend beschreibend ist
Ein klassisches Beispiel ist ein Schließen-Button mit X-Symbol:
<button aria-label="Dialog schließen">×</button>
ARIA-Labels können auch verwendet werden, wenn der sichtbare Text eines Elements für Screenreader-Nutzer durch einen präziseren Text ergänzt werden soll. Dies ist beispielsweise bei Navigationslinks sinnvoll, die mehr Kontext benötigen:
<a href="p1.html" aria-label="Weiter zum Artikel über Barrierefreiheit">Weiter</a>
Wichtig zu beachten ist der Unterschied zu aria-labelledby und aria-describedby:
aria-label definiert direkt einen Text
aria-labelledby verweist auf die ID eines anderen Elements, dessen Inhalt als Label verwendet wird
aria-describedby bietet zusätzliche, ergänzende Beschreibungen
aria-labelledby schlägt aria-label, und aria-label schlägt den sichtbaren Inhalt.
Bei der Verwendung von ARIA-Labels sollten einige wichtige Grundsätze beachtet werden:
Der Text sollte prägnant und informativ sein
Redundante Informationen sollten vermieden werden
An Elementen ohne Rolle (etwa
<div>oder<span>) bleibt aria-label wirkungslosDas Label muss in der Sprache der Seite verfasst sein
Kein aria-label an Elementen, die bereits einen aussagekräftigen sichtbaren Text haben
ARIA-Labels sind ein mächtiges Werkzeug für barrierefreies Webdesign, sollten aber nicht übermäßig eingesetzt werden. Wenn ein Element bereits einen aussagekräftigen, sichtbaren Text hat oder durch seine HTML-Semantik ausreichend beschrieben ist, ist kein zusätzliches ARIA-Label erforderlich. Die beste Praxis ist, zunächst native HTML-Elemente und deren eingebaute Semantik zu nutzen und ARIA-Labels nur dort einzusetzen, wo sie wirklich notwendig sind.
