Das Attribut aria-label ist Teil der ARIA-Spezifikation (Accessible Rich Internet Applications) des W3C. Es ermöglicht, HTML-Elementen eine textuelle Beschreibung hinzuzufügen, die ausschließlich für Screenreader bzw. assistive Technologien sichtbar ist. Dies ist besonders wichtig bei Elementen, die visuell selbsterklärend sind, deren Bedeutung für nicht-sehende Nutzende aber nicht unmittelbar erschließbar ist.
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 Bedienungselementen 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 ersetzt 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
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
Die Sprache sollte natürlich und benutzerfreundlich sein
Technische Begriffe sollten, wo möglich, vermieden werden
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.
