WCAG 4.1.3: Statusmeldungen

Statusmeldungen – „Zum Warenkorb hinzugefügt“, „12 Treffer gefunden“, „Wird gespeichert…“ – müssen assistiven Technologien programmatisch mitgeteilt werden, ohne dass sie den Fokus erhalten. Was sich nur visuell irgendwo einblendet, passiert für Screenreader-Nutzer schlicht nicht. (Englisch: Status Messages.)

Was verlangt das Kriterium?

Eine Statusmeldung informiert über Erfolg, Fortschritt oder Ergebnis, ohne Kontextwechsel – im Unterschied zum Dialog, der den Fokus bewusst übernimmt. Das Werkzeug sind Live-Regionen:

• role="status" (entspricht aria-live="polite"): der Normalfall – höflich, wartet, bis die Sprachausgabe frei ist.
• role="alert" (entspricht aria-live="assertive"): unterbricht sofort – nur für dringende Fehler.
• Fortschritt: natives <progress> bzw. role="progressbar" mit gepflegten Werten.

Wen betrifft es besonders?

Blinde und sehbehinderte Nutzer: Der Toast oben rechts, der Warenkorb-Zähler, die Trefferzahl unter dem Filter – alles unsichtbare Ereignisse, wenn sie nicht angesagt werden. Auch Vergrößerungs-Nutzern entgehen Meldungen außerhalb des Ausschnitts; die Ansage (bzw. der Klang) hilft auch ihnen.

Richtig & falsch im Code

<!-- Falsch: Meldung wird nur ins DOM geworfen -->
<div class="toast">Zum Warenkorb hinzugefügt ✓</div>

<!-- Richtig: Live-Region existiert VOR der Meldung im DOM,
     der Text wird hineingeschrieben -->
<div role="status" class="toast-region"></div>
<script>
  document.querySelector('.toast-region').textContent =
    'Ergonomische Tastatur zum Warenkorb hinzugefügt.';
</script>

Der häufigste Praxisfehler: Die Live-Region wird gleichzeitig mit der Meldung erzeugt – viele Screenreader ignorieren das. Die Region gehört leer ins initiale Markup, die Meldung später hinein. Alle Feinheiten (polite vs. assertive, atomare Updates, Toasts) stehen unter Live-Regionen und Status, Fortschritt & Benachrichtigungen.

So testest du es

1. Inventur der dynamischen Meldungen: Warenkorb, Filter-Trefferzahl, Speichern-Bestätigung, Formular-Erfolg, Ladezustände.
2. Mit NVDA oder VoiceOver auslösen: Wird die Meldung angesagt, ohne dass der Fokus springt?
3. DevTools: Tragen die Meldungs-Container role="status"/aria-live, und existieren sie vor dem Update?

Verwandte Themen

• Live-Regionen (aria-live) – das Werkzeug im Detail
• Status, Fortschritt & Benachrichtigungen – Muster für Toasts & Spinner
• 4.1.2 Name, Rolle, Wert – der Robust-Nachbar