aria-label

aria-label ist ein Attribut aus WAI-ARIA, mit dem ein Element einen zugänglichen Namen als Text-String erhält. Dieser Name erscheint im Accessibility Tree und wird von Screenreadern vorgelesen, ist aber nicht sichtbar.

Typische Einsatzfälle

• Icon-Buttons ohne Text: <button aria-label="Menü öffnen">
• Unterscheidung mehrerer Landmarks: <nav aria-label="Hauptnavigation">
• Suchfelder mit sichtbarem Lupen-Icon statt Label (besser: sichtbares Label)

Regeln für den richtigen Einsatz

• Sichtbaren Text bevorzugen; aria-labelledby verwenden, wenn ein sichtbares Label existiert
• Sichtbare Beschriftung muss im Namen enthalten sein (WCAG 2.5.3) – wichtig für Spracheingabe
• Nur auf interaktiven Elementen, Landmarks und Elementen mit passender Rolle; auf div oder span ohne Rolle wird es oft ignoriert
• Keine Rollenangabe im Label („Button Suche“) – die Rolle sagt der Screenreader selbst
• Wird nicht von allen Übersetzungstools automatisch übersetzt – bei mehrsprachigen Seiten beachten

Häufige Fragen

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

aria-label enthält den Namen direkt als Text, aria-labelledby verweist per ID auf ein anderes Element, dessen Text als Name dient. aria-labelledby hat Vorrang.

Ersetzt aria-label das alt-Attribut?

Bei <img> sollte immer alt verwendet werden. aria-label ist für Inline-SVGs mit role="img" oder für Elemente ohne native Beschriftungsmöglichkeit gedacht.

Verwandte Begriffe: ARIA, Accessibility Tree, Formular-Label, Textalternative