Barrierefreiheitszertifikat – Startseite
Kostenlos prüfen Menü

Statusmeldungen, die ankommen, ohne den Fokus zu stehlen

„In den Warenkorb gelegt“, „Gespeichert“, „3 Ergebnisse“: Solche Meldungen sieht man, aber ein Screenreader sagt sie nur an, wenn sie in einer Live-Region stehen.

4.1.32.2.12.4.111.3.1

Live-Demo

Diese Demo ist mit axe-core ohne Verstöße geprüft und vollständig per Tastatur bedienbar.

Probieren Sie es mit der Tastatur: Tab, Enter, Leertaste, Pfeiltasten, Escape. Mit eingeschaltetem Screenreader hören Sie, was angesagt wird.

Die Live-Demo braucht JavaScript. Code und Anforderungen stehen unten.

Tastaturbedienung

Tab
Der Fokus bleibt auf dem Button, den Sie gedrückt haben; die Meldung wird trotzdem angesagt.
Enter / Leertaste
Löst die Aktion aus oder schließt die Meldung (Schließen-Button).

Wann Sie das Muster einsetzen

4.1.3 Statusmeldungen verlangt, dass Statusmeldungen für Hilfsmittel erkennbar sind, ohne dass sie den Fokus bekommen. Typische Fälle: Bestätigung nach dem Speichern, Anzahl der Suchergebnisse nach dem Filtern, Hinweis, dass etwas in den Warenkorb gelegt wurde.

Toasts, die nach wenigen Sekunden verschwinden, sind riskant: Wer langsamer liest oder vergrößert arbeitet, verpasst sie. Lassen Sie wichtige Meldungen stehen, bis sie jemand schließt, oder wiederholen Sie die Information an einer festen Stelle.

Rollen, Zustände, Eigenschaften

  • Der Container mit role="status" (entspricht aria-live="polite") ist schon beim Laden der Seite vorhanden und leer; erst danach wird Text hineingeschrieben.
  • role="alert" (entspricht aria-live="assertive") nur für dringende Meldungen wie Fehler, die sofort wichtig sind.
  • Die Meldung ist kurz und für sich verständlich.
  • Kein Fokuswechsel zur Meldung; der Fokus bleibt, wo die Person gerade arbeitet.
  • Der Toast verdeckt keine fokussierten Elemente (2.4.11 Fokus nicht verdeckt (Minimum)) und lässt sich schließen.

Tastaturbedienung

TasteWirkung
TabDer Fokus bleibt auf dem Button, den Sie gedrückt haben; die Meldung wird trotzdem angesagt.
Enter / LeertasteLöst die Aktion aus oder schließt die Meldung (Schließen-Button).

Code

HTML und JavaScript (gekürzt)
<!-- beim Laden vorhanden, leer -->
<div role="status" class="toast-region"></div>

<button type="button" id="save">Speichern</button>

<script type="module">
const region = document.querySelector('.toast-region');
document.getElementById('save')
  .addEventListener('click', () => {
    region.textContent = 'Änderungen gespeichert.';
  });
</script>

Häufige Fehler

  • Live-Region wird erst zusammen mit der Meldung ins DOM eingefügt: Viele Screenreader sagen dann nichts an.
  • Alles ist role="alert": Jede Kleinigkeit unterbricht, was gerade vorgelesen wird.
  • Der Fokus springt auf die Meldung, die Person verliert ihre Position im Formular.
  • Toast verschwindet nach zwei Sekunden und war die einzige Stelle mit dieser Information.

Passende WCAG-Kriterien

Quellen

Sind Ihre Komponenten so gebaut?

Der kostenlose Check findet viele Fehler automatisch. Im Audit prüft ein Mensch jede Komponente mit Tastatur und Screenreader.

Kostenlos prüfenPrüfmethode ansehen