4.1.3 Status Messages

WCAG – Definition

Inhalte, die als Statusmeldungen angezeigt werden und die für den Nutzer wichtig sind, müssen von assistiven Technologien (z. B. Screenreader) erkannt werden, ohne dass der Fokus verschoben wird.

Das bedeutet: Wenn auf einer Website eine Nachricht eingeblendet wird (z. B. „Formular erfolgreich gesendet“ oder „3 neue Ergebnisse geladen“), soll ein Screenreader diese Meldung automatisch vorlesen, auch wenn der Nutzer weiterhin auf einem Eingabefeld oder Button ist.

Bedeutung

  • Menschen, die Screenreader nutzen, bekommen sofort mit, dass sich etwas Wichtiges auf der Seite geändert hat.

  • Ohne diese Regel würden sie sonst nicht merken, dass ein Formular erfolgreich abgesendet wurde, ein Fehler aufgetreten ist oder dass neue Inhalte geladen wurden.

  • Wichtig: Der Fokus darf nicht automatisch verschoben werden (kein erzwungener focus()!), da das die Bedienung stört.

Ausreichende Techniken

ARIA-Live-Regionen verwenden

<div aria-live="polite" class="status-message"></div>
<script>
  document.querySelector('.status-message').textContent = "Ihre Nachricht wurde erfolgreich gesendet.";
</script>

  • aria-live="polite" → Screenreader liest Meldung vor, wenn Zeit ist.

  • aria-live="assertive" → Screenreader liest Meldung sofort (z. B. bei Fehlermeldungen).

Rolle status oder alert nutzen

<div role="status">Einstellungen gespeichert</div>
<div role="alert">Fehler: Bitte E-Mail eingeben!</div>

  • role="status" entspricht aria-live="polite".

  • role="alert" entspricht aria-live="assertive".

Visuell versteckte Statusmeldungen für Screenreader

Falls die Meldung nicht sichtbar ist, aber trotzdem vorgelesen werden soll, mit sr-only oder CSS-Techniken zugänglich machen.

<div role="status" class="sr-only">Formular erfolgreich abgesendet</div>

Automatische Updates (z. B. Warenkorb-Zähler)

<span id="cart-count" aria-live="polite">0</span>
<script>
  function updateCart(count) {
    document.getElementById('cart-count').textContent = count;
  }
</script>

Beratungstechniken

  • Prüfen, ob alle wichtigen Rückmeldungen auf der Website (Erfolgsmeldungen, Fehler, Ladehinweise) Screenreader-kompatibel sind.

  • Empfehlung: Lieber role="status" oder role="alert" als komplexe aria-live-Implementierungen — einfacher und klarer.

  • Keine Überflutung: Nur relevante Infos als Statusmeldung markieren.

  • Kein Fokus-Jumping: Meldungen sollen vorgelesen werden, ohne dass der Nutzer plötzlich aus seiner Eingabe herausgerissen wird.

  • Entwickler-Coaching: „Wenn etwas visuell eingeblendet wird, frag dich: Hört das auch der Screenreader?“

Fehler

  • Meldungen werden nur visuell eingeblendet (innerHTML, display:block) – Screenreader merken das nicht.
  • Fokus wird zwangsweise verschoben (element.focus()) → Nutzer verliert Orientierung.
  • Mehrere Meldungen gleichzeitig in einer Live-Region → Screenreader liest sie unverständlich hintereinander weg.
  • Meldungen als Bilder oder Icons ohne Textalternative.
  • Erfolgsmeldung wird nur mit Farbe angezeigt („grün = erfolgreich“).