Eine ARIA-Live-Region ist ein Bereich, dessen inhaltliche Änderungen ein Screenreader automatisch vorliest. Du kennzeichnest ihn mit dem Attribut aria-live. Das ist wichtig, weil dynamische Inhalte – etwa per JavaScript nachgeladene Meldungen – sonst unbemerkt bleiben: Sehende sehen die Änderung, Screenreader-Nutzer nicht, weil der Fokus an anderer Stelle steht. Live-Regions schließen diese Lücke, ohne den Fokus zu verschieben.
Die beiden Stufen
aria-live="polite": Die Ansage wartet, bis der Nutzer eine Pause macht. Für die meisten Statusmeldungen die richtige Wahl.aria-live="assertive": Die Ansage unterbricht sofort. Nur für dringende Meldungen wie kritische Fehler einsetzen.
Statt der Attribute kannst du auch passende Rollen nutzen: role="status" verhält sich wie polite, role="alert" wie assertive. Das ist oft die sauberere Variante.
Wie du es umsetzt
Der entscheidende Punkt: Die Live-Region muss schon im DOM stehen, bevor du sie befüllst – als leerer Container. Erst danach schreibst du Text hinein. Fügst du den Container samt Text gleichzeitig ein, erkennt der Screenreader die Änderung oft nicht. Typische Einsätze:
- Formular-Fehler, siehe Fehleridentifikation.
- „In den Warenkorb gelegt“-Bestätigungen in WooCommerce.
- Filter- oder Suchergebnisse, die ohne Reload aktualisiert werden.
Setze Live-Regions sparsam ein. Zu viele oder zu lange Ansagen überfordern. Halte die Texte kurz und eindeutig. Live-Regions ergänzen die Tastaturbedienbarkeit, ersetzen aber keine sinnvolle Fokussteuerung bei modalen Dialogen.