ARIA Live Regions – Dynamische Inhalte für Screenreader ankündigen
ARIA Live Regions sind ein Mechanismus aus der WAI‑ARIA‑Spezifikation, der es ermöglicht, dynamische Änderungen im DOM automatisch durch Screenreader vorlesen zu lassen – ohne dass der Fokus verschoben werden muss.
Sie sind essenziell für moderne, dynamische Webinterfaces, bei denen Inhalte sich ohne Seitenreload oder sichtbare Benutzeraktion ändern.
Warum ARIA Live Regions wichtig sind
Screenreader erkennen standardmäßig nur fokussierte Inhalte. Wenn sich Inhalte ändern, ohne dass ein Fokuswechsel erfolgt, bekommen Nutzer:innen mit Screenreader dies nicht mit – es sei denn, die Region ist entsprechend als „live“ gekennzeichnet.
Mit ARIA Live Regions kannst du Screenreadern sagen: „Beobachte diesen Bereich und lies neue Inhalte automatisch vor.“
| Beispiel | Beschreibung |
|---|---|
| Börsenticker | Aktienkurse aktualisieren sich automatisch |
| Chat-Interfaces | Neue Nachrichten werden ohne Reload eingeblendet |
| Formularstatus | Validierungsergebnisse wie „E-Mail gültig“ |
| Fehlermeldungen | Hinweise wie „Bitte Passwort eingeben“ |
| Ladezustände | „Speichern läuft…“ oder „Daten geladen“ |
ARIA Live Attribute Übersicht
| Attribut | Bedeutung |
|---|---|
| aria-live="polite" | Änderungen werden nach dem aktuellen Text vorgelesen |
| aria-live="assertive" | Änderungen werden sofort unterbrochen und vorgelesen |
| aria-atomic="true" | Der gesamte Inhalt der Region wird vollständig vorgelesen |
| aria-relevant="text" | Gibt an, welche Änderungen relevant sind (z. B. Text) |
Beispiel – Live-Region für Statusmeldungen
<div aria-live="polite" aria-atomic="true" class="status-message">
<!-- Dynamisch generierte Nachricht -->
</div>WCAG-Bezug
ARIA Live Regions unterstützen die Einhaltung der folgenden Richtlinien:
- 1.3.1 Informationen und Beziehungen
- 3.3.1 Fehlererkennung
- 4.1.3 Statusmeldungen (in WCAG 2.1)
Best Practices
- aria-live="polite" für nicht-kritische Statusmeldungen
- aria-live="assertive" nur für wichtige oder sicherheitsrelevante Inhalte
- Live Region sollte bereits beim Seitenaufruf im DOM existieren
- zu häufige oder redundante Ansagen – dies kann Nutzer:innen überfordern
Mehr zu unseren Leistungen im Bereich Digitale Barrierefreiheit erfahren Sie hier.
