# ARIA-Live-Regionen: Statusmeldungen ansagen

Source: https://allyway.ai/de/glossary/aria-live-regionen

Eine ARIA-Live-Region ist ein Seitenbereich, der mit aria-live oder einer Live-Rolle wie status oder alert ausgezeichnet ist. Ändert sich sein Inhalt, sagt der Screenreader den neuen Text an, ohne dass der Fokus dorthin wandern muss.

ARIA-Live-Regionen sind Bereiche einer Seite, die assistiver Technologie signalisieren: „Änderungen hier bitte ansagen“. Legt jemand einen Artikel in den Warenkorb, liefert die Suche Treffer oder erscheint neben einem Feld eine Fehlermeldung, sehen Sehende das sofort. Wer mit einem [Screenreader](https://allyway.ai/de/glossary/screenreader) arbeitet, erfährt davon nur, wenn die Meldung in einer Live-Region steht – sonst passiert die Änderung lautlos.

## Was es bedeutet

[WCAG 4.1.3 Statusmeldungen](https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html) (Stufe AA, [WCAG 2.2](https://allyway.ai/de/regulations/wcag-2-2)) verlangt, dass Statusmeldungen über Rolle oder Eigenschaften programmatisch ermittelbar sind. Assistive Technologie muss sie ausgeben können, ohne dass die Meldung den Fokus erhält. Das W3C definiert eine Statusmeldung als Inhaltsänderung ohne Kontextwechsel, die über das Ergebnis einer Aktion, einen Wartezustand, den Fortschritt eines Vorgangs oder vorhandene Fehler informiert.

Typische Beispiele aus der W3C-Erläuterung: „5 Ergebnisse gefunden“ nach einer Suche, ein aktualisierter Warenkorb-Zähler, ein Hinweis „Ungültige Eingabe“ neben einem Feld, eine Ladeanzeige und eine Bestätigung nach dem Absenden eines Formulars.

[ARIA](https://allyway.ai/de/glossary/aria) bietet dafür mehrere Auszeichnungen:

| Auszeichnung | Ansage | Geeignet für |
|---|---|---|
| `role="status"` | Höflich – wartet, bis der Screenreader fertig ist | Treffer, Bestätigungen, Warenkorb-Zähler (W3C-Technik ARIA22) |
| `role="alert"` | Bestimmt – unterbricht sofort | Fehler und Warnungen, die jetzt wichtig sind (ARIA19) |
| `role="log"` | Höflich, neue Einträge der Reihe nach | Chatnachrichten, Aktivitätsverläufe (ARIA23) |
| `aria-live="polite"` / `"assertive"` | Wie oben, auf beliebigem Container | Eigene Komponenten ohne passende Rolle |

> **Note:** > **Nicht jede Änderung ist eine Statusmeldung**
> Meldungen in einem Dialog, der den Fokus übernimmt, eine neue Seite oder ein aufklappendes Menü fallen nicht unter 4.1.3. Auf- und Zuklappen regelt 4.1.2 Name, Rolle, Wert – siehe [zugänglicher Name](https://allyway.ai/de/glossary/zugaenglicher-name).

Das W3C nennt auch einen Fehler: `role="alert"` oder `aria-live="assertive"` für Inhalte, die weder wichtig noch zeitkritisch sind. Ständige Unterbrechungen machen eine Seite anstrengend.

## Praxisbeispiele

```html title="Beispiel"
<!-- Gut: Die Region existiert von Anfang an, der Text kommt später -->
<p role="status" id="warenkorb-status"></p>
<script>
  document.getElementById('warenkorb-status').textContent = '3 Artikel im Warenkorb';
</script>

<!-- Gut: ein Fehler, der sofort Aufmerksamkeit braucht -->
<p role="alert">Zahlung fehlgeschlagen. Bitte prüfen Sie die Kartennummer.</p>

<!-- Schlecht: nur optische Änderung, wird nie angesagt -->
<span class="badge">3</span>
```

**Do:** Do

Legen Sie die Live-Region beim Laden der Seite an und ändern Sie danach nur ihren Text. Halten Sie Meldungen kurz („Gespeichert“), verwenden Sie für die meisten Fälle `role="status"` und reservieren Sie `role="alert"` für echte Fehler.

**Don't:** Don't

Fügen Sie die Live-Region nicht erst zusammen mit der Meldung ein – viele Screenreader verpassen sie dann. Markieren Sie keine großen Bereiche wie eine ganze Produktliste als live, und verlassen Sie sich nicht allein auf Farbe oder ein Badge.

## So prüfen Sie ARIA-Live-Regionen



## Häufige Fragen

Q: Was ist der Unterschied zwischen aria-live polite und assertive?
A: polite wartet, bis der Screenreader seine aktuelle Ausgabe beendet hat, und liest dann die Änderung vor. assertive unterbricht sofort. Nutzen Sie fast immer polite und assertive nur für dringende Fehler oder Warnungen.

Q: Ist role="status" dasselbe wie aria-live="polite"?
A: Fast. role="status" bringt implizit aria-live="polite" und aria-atomic="true" mit, die ganze Meldung wird also vorgelesen. Zusätzlich erfährt die assistive Technologie, dass es sich um eine beratende Statusinformation handelt.

Q: Warum sagt mein Screenreader die Live-Region nicht an?
A: Meist wurde die Region gemeinsam mit ihrem Text in die Seite eingefügt. Browser melden nur Änderungen in Regionen, die bereits existieren. Legen Sie beim Laden einen leeren Container an und befüllen Sie ihn später. Container mit display: none werden ebenfalls nicht angesagt.

Q: Brauchen Fehlermeldungen in Formularen eine Live-Region?
A: Fehler, die ohne Fokuswechsel erscheinen, sind Statusmeldungen im Sinne von WCAG 4.1.3 und brauchen role="alert" oder eine Live-Region. Springt der Fokus stattdessen zu einer Fehlerübersicht, liest der Screenreader sie ohnehin vor. Verknüpfen Sie jede Meldung zusätzlich mit ihrem Feld, wie bei [Formular-Beschriftungen](https://allyway.ai/de/glossary/formular-beschriftungen) beschrieben.