ARIA-Attribute richtig einsetzen: aria-label, aria-describedby und aria-live erklärt

Was ist ARIA und wofür brauche ich es?

ARIA (Accessible Rich Internet Applications) sind HTML-Attribute die Screenreadern zusätzliche Informationen liefern. Sie überbrücken die Lücke zwischen dynamischen Web-Anwendungen und Screenreader-Kompatibilität. Aber: Die erste Regel von ARIA lautet: Nutze kein ARIA wenn natives HTML das Problem löst.

Ein button-Element ist immer besser als ein div mit role='button'.

Die wichtigsten ARIA-Attribute für BFSG

aria-label: Gibt einem Element einen zugänglichen Namen (z.B. für Icon-Buttons). aria-describedby: Verknüpft ein Element mit einer zusätzlichen Beschreibung.

aria-expanded: Zeigt an ob ein Dropdown/Akkordeon geöffnet ist. aria-live: Kündigt dynamische Änderungen an (z.B. 'Artikel zum Warenkorb hinzugefügt').

aria-required: Markiert Pflichtfelder.

Häufige ARIA-Fehler die schaden statt helfen

aria-label auf Elemente setzen die bereits einen sichtbaren Text haben (verdoppelt die Ansage). role='button' auf ein div statt einfach ein button-Element zu nutzen. aria-hidden='true' auf sichtbare Elemente (versteckt sie für Screenreader).

Und: Zu viele ARIA-Attributes machen die Seite unübersichtlich für Screenreader-Nutzer.

ARIA-Live-Regionen für dynamische Inhalte

Wenn sich Inhalte auf der Seite ändern ohne Seitenwechsel (AJAX-Updates, Warenkorb-Zähler, Fehlermeldungen), muss der Screenreader informiert werden. aria-live='polite' wartet bis der Nutzer fertig ist, aria-live='assertive' unterbricht sofort. Nutze 'assertive' nur für kritische Meldungen (Fehler, Zeitlimits).

Häufig gestellte Fragen