status

Verwendung

Für nicht dringende Hinweismeldungen: „Gespeichert“, „12 Ergebnisse“, „Zum Warenkorb hinzugefügt“, „Verbinde …“. role="status" entspricht aria-live="polite" kombiniert mit einem impliziten aria-atomic="true" — der Screenreader wartet, bis die aktuelle Ausgabe abgeschlossen ist, und liest dann die Änderung vor.

Die meisten Formular-Absendebestätigungen, Suchergebnis-Anzahlen, Ladeabschlüsse und Toast-Benachrichtigungen gehören hierher. role="alert" sollte echten Unterbrechungen vorbehalten bleiben.

Das native <output>-Element trägt role="status" automatisch — nützlich für Taschenrechner-ähnliche Ergebnisse, die mit <form>-Eingaben verknüpft sind. Für Toast- und Statusbenachrichtigungen außerhalb eines Formular-Kontexts ist <div role="status"> das gebräuchliche Muster.

Wie alle Live-Regionen muss das Status-Element vor dem Einfügen der Nachricht im DOM vorhanden sein. Es empfiehlt sich, <div role="status"></div> zunächst leer zu rendern und dann den Textinhalt zu aktualisieren. Das nachträgliche Hinzufügen des Elements mit bereits enthaltenem Inhalt ist unzuverlässig.

Abwägungen bei Live-Regionen

• aria-live="off" — keine Ansage. Standard für reguläre Inhalte.
• aria-live="polite" (≡ role="status") — Ansage bei der nächsten Pause. Standard für Statusmeldungen.
• aria-live="assertive" (≡ role="alert") — unterbricht die laufende Sprachausgabe. Nur für dringende Meldungen verwenden.

WCAG 4.1.3 (Statusmeldungen, Stufe AA) verlangt, dass Statusmeldungen über eine Live-Region zugänglich gemacht werden, damit assistive Technologien sie ankündigen können, ohne einen Fokuswechsel zu erzwingen.

Häufige Fehler

• Status-Element wird im laufenden Betrieb mit bereits enthaltenem Text erzeugt. Viele Screenreader verpassen die Ansage.
• Den Status mit formatiertem Inhalt aktualisieren (<span>s und <strong>s). Manche Screenreader lesen das Markup wörtlich; der Statusinhalt sollte daher reiner Text bleiben.
• Mehrere Aktualisierungen werden schnell hintereinander ausgelöst — spätere Meldungen überschreiben frühere, ohne dass eine Ansage erfolgt.
• role="status" für genuinen dringende Fehler verwenden (hier ist role="alert" korrekt).
• Visuell ausgeblendeter Status ohne aria-atomic-Überlegung, wenn der Text sowohl stabile als auch sich ändernde Teile enthält. Das standardmäßige aria-atomic="true" bei Status liest die gesamte Region bei jeder Änderung vor, was störend sein kann.

Beispiel

<!-- Render empty at page load -->
<div role="status" id="cartStatus"></div>

<script>
  // When the cart updates:
  document.getElementById('cartStatus').textContent =
    'Added to cart. 3 items, $42.00 total.';
</script>

<!-- Native equivalent -->
<form>
  <label>a <input type="number" id="a"></label>
  <label>b <input type="number" id="b"></label>
  <output for="a b" id="sum">0</output>
</form>