Definition: Eine Live-Region ist ein Bereich einer Seite, dessen Änderungen ein Screenreader von sich aus ansagt – auch wenn der Fokus ganz woanders ist. Man kennzeichnet ihn mit aria-live oder einer Rolle wie status oder alert. So erfüllen Statusmeldungen das WCAG-Kriterium 4.1.3 [1][2].
Englisch: Live region · Auch: aria-live · Zuletzt geprüft: 27. September 2026
Wozu man sie braucht
Sehende Menschen bemerken, wenn sich auf der Seite etwas ändert: „Artikel in den Warenkorb gelegt“, „12 Ergebnisse gefunden“, „Gespeichert“. Ein Screenreader liest dagegen nur, wo der Fokus gerade ist. Ohne Live-Region bekommt ein blinder Mensch die Meldung nicht mit – und weiß nicht, ob sein Klick etwas bewirkt hat.
Die Alternative wäre, den Fokus auf die Meldung zu setzen. Das reißt Nutzende aber aus dem, was sie gerade tun. WCAG 4.1.3 verlangt deshalb, dass Statusmeldungen angesagt werden können, ohne den Fokus zu bewegen [1].
Die wichtigsten Varianten
| Auszeichnung | Wirkung | Beispiel |
|---|---|---|
role="status" (entspricht aria-live="polite") | wird angesagt, sobald der Screenreader fertig ist | „3 Artikel im Warenkorb“ |
role="alert" (entspricht aria-live="assertive") | unterbricht sofort | „Sitzung läuft in 1 Minute ab“ |
aria-live="off" | keine Ansage | Standard |
Die Rolle alert ist für Dringendes. Wer jede Kleinigkeit als Alarm auszeichnet, unterbricht ständig.
Häufige Fehler
- Die Region wird mit der Meldung zusammen eingefügt. Viele Screenreader bemerken nur Änderungen in einer Region, die schon vorher im DOM stand. Legen Sie den leeren Container beim Laden an und füllen Sie ihn später.
- Zu viel in einer Region: Wer eine ganze Ergebnisliste live schaltet, lässt sie komplett vorlesen.
- Fehlermeldungen nur farbig und ohne Ansage.
- Meldungen, die nach zwei Sekunden verschwinden, bevor sie jemand lesen kann.
Im Code
<!-- Beim Laden vorhanden, zunächst leer -->
<p role="status" id="cart-status"></p>// Nach dem Hinzufügen nur den Text setzen
const status =
document.getElementById('cart-status')
status.textContent = '3 Artikel im Warenkorb'So prüfen Sie es
Schalten Sie einen Screenreader ein, etwa NVDA oder VoiceOver. Lösen Sie jede Statusmeldung aus: Filter anwenden, in den Warenkorb legen, Formular abschicken. Wird die Meldung angesagt, ohne dass Sie den Fokus bewegen?
Wie Reviseberg damit umgeht
Ob eine Meldung angesagt wird, lässt sich nur mit laufendem Screenreader prüfen. WCAG 4.1.3 gehört deshalb zu den Kriterien, die Reviseberg nicht automatisch prüft: Es bleibt „nicht geprüft“, bis eine Person ein Ergebnis mit Methode erfasst. Ein geführter Test beschreibt das Vorgehen Schritt für Schritt. Ein Screenreader-Agent ist heute nicht Teil von Reviseberg.
Verwandte Begriffe
Screenreader · ARIA · Accessibility Tree · Formularbeschriftung · Manuelle Prüfung