Live-Regionen mit aria-live

Auf einer modernen Seite ändert sich vieles, ohne dass sie neu lädt: Ein Artikel wandert in den Warenkorb, eine Suche liefert „12 Ergebnisse“, ein Formular meldet einen Fehler, ein Entwurf wird automatisch gespeichert. Wer das sieht, bekommt es mit. Wer einen Screenreader nutzt, bemerkt davon erst einmal nichts – denn der Fokus ist woanders, und die Änderung passiert still im Hintergrund.

Genau diese Lücke schließen Live-Regionen. Eine Live-Region ist ein Bereich, dessen Inhaltsänderungen ein Screenreader automatisch ankündigt, ohne dass der Fokus dorthin wandern muss. Das macht sie zu einem der Fälle, in denen ARIA echte Arbeit leistet, die HTML allein nicht kann.

polite oder assertive

Das zentrale Attribut ist aria-live, und es kennt vor allem zwei Werte:

• polite – die Ansage wartet, bis der Screenreader gerade nichts anderes vorliest. Höflich, nicht unterbrechend. Der Normalfall.
• assertive – die Ansage unterbricht sofort. Nur für wirklich Dringendes, das keinen Aufschub verträgt.

<!-- höflich: stört nichts -->
<div aria-live="polite">12 Ergebnisse gefunden</div>

<!-- dringend: unterbricht -->
<div aria-live="assertive">Verbindung verloren – Eingaben werden nicht gespeichert</div>

Meine Faustregel: im Zweifel polite. assertive reiße ich mir für Fälle auf, in denen eine Verzögerung echten Schaden anrichtet – sonst wird die Bedienung zur Dauerunterbrechung.

Die zwei fertigen Rollen

Für die häufigsten Fälle musst du aria-live gar nicht direkt setzen. Zwei Rollen bringen es eingebaut mit – und lesen sich im Markup angenehm selbsterklärend:

• role="status" entspricht einer höflichen Live-Region (aria-live="polite"). Ideal für Erfolgs- und Statusmeldungen.
• role="alert" entspricht einer assertiven Live-Region. Genau richtig für Fehlermeldungen.

<p role="status">Entwurf gespeichert</p>
<p role="alert">Bitte korrigiere die rot markierten Felder.</p>

Der wichtigste Kniff: die Region muss vorher da sein

Hier scheitern die meisten Versuche, und es ist eine unscheinbare Eigenheit: Eine Live-Region muss bereits im DOM existieren, bevor du Text hineinschreibst. Screenreader beobachten den Bereich – wird er erst zusammen mit seinem Inhalt eingefügt, gibt es oft keine Ansage.

Mein bewährtes Muster ist deshalb eine dauerhaft vorhandene, optisch versteckte Region, die ich bei Bedarf befülle:

<!-- liegt dauerhaft im Layout, anfangs leer -->
<div id="status" aria-live="polite" class="visually-hidden"></div>

// später, wenn etwas passiert:
document.getElementById('status').textContent = 'Artikel zum Warenkorb hinzugefügt.';

Das .visually-hidden blendet die Region optisch aus, hält sie für Screenreader aber präsent – dasselbe Hilfsmittel wie bei versteckten Labels.

Feineinstellung: aria-atomic

Mit aria-atomic="true" legst du fest, dass bei einer Änderung der gesamte Inhalt der Region vorgelesen wird, nicht nur der geänderte Teil. Das ist hilfreich, wenn die Botschaft erst im Ganzen Sinn ergibt – etwa „Noch 2 von 5 Schritten“. Standardmäßig (false) wird nur die Änderung angesagt.

Typische Einsatzfälle

• Formularfehler beim Absenden (role="alert").
• Ergebniszahlen bei einer Live-Suche (role="status").
• Bestätigungen wie „In den Warenkorb gelegt“ oder „Gespeichert“.
• Folienwechsel in einem Karussell, dezent per polite.

Allen gemeinsam ist: Etwas Wichtiges ändert sich abseits des Fokus, und ohne Ansage bliebe es unbemerkt.

Häufige Fehler

• Region erst mit Inhalt eingefügt. Keine Ansage – sie muss vorher existieren.
• Alles assertive. Ständige Unterbrechungen machen die Seite unbenutzbar.
• Zu viele Live-Regionen. Wenn dauernd etwas spricht, hört niemand mehr hin.
• Lange Texte am Stück. Live-Ansagen sollten knapp sein – ein Satz, kein Absatz.
• Live-Region statt Fokuswechsel. Bei kritischen Fehlern ist es oft besser, den Fokus aktiv auf die Meldung zu setzen, statt nur anzukündigen.

Häufige Fragen

role="alert" oder aria-live="assertive"?

Im Ergebnis fast dasselbe – role="alert" ist die lesbarere Kurzform einer assertiven Region. Für echte Fehler nehme ich role="alert", weil es im Markup sofort klarmacht, worum es geht. Mehr zur Einbindung in Formulare steht unter Fehlermeldungen barrierefrei.

Muss ich die Region sichtbar machen?

Nein. Oft ist die Meldung ohnehin sichtbar (eine Trefferzahl etwa). Wenn nicht, genügt eine optisch versteckte Region – Hauptsache, sie ist im DOM vorhanden.

Warum höre ich meine Ansage manchmal nicht?

Meist, weil die Region zu spät eingefügt wurde, der Text identisch zum vorherigen ist (keine Änderung) oder zu schnell mehrere Updates aufeinanderfolgen. Live-Regionen sind etwas zickig – einmal sauber aufgesetzt, laufen sie aber zuverlässig.

Fazit

Live-Regionen kündigen Änderungen an, die abseits des Fokus passieren – höflich mit aria-live="polite" bzw. role="status", dringend mit assertive bzw. role="alert". Der entscheidende Kniff ist, die Region vorab ins DOM zu legen und dann nur ihren Text zu aktualisieren. Sparsam und gezielt eingesetzt, schließen sie eine Lücke, die sonst nur Sehende gar nicht bemerken – und genau das ist der Sinn der Sache.