4.1.3 Statusmeldungen

Was bedeutet das?

Viele Websites zeigen kurze Rückmeldungen an, ohne die Seite neu zu laden: dass ein Artikel im Warenkorb liegt, dass ein Formular gesendet wurde, wie viele Suchergebnisse es gibt oder dass etwas gerade lädt. Sehende Menschen bemerken das sofort. Für Screenreader-Nutzer muss die Meldung im Code so ausgezeichnet sein, dass sie automatisch vorgelesen wird.

Dafür gibt es Live-Bereiche mit role="status", role="alert" oder aria-live. Wichtig ist, dass der Fokus dabei nicht verschoben wird: Die Person arbeitet ungestört weiter und hört die Meldung trotzdem. Das Kriterium betrifft nur Meldungen, bei denen der Fokus nicht ohnehin auf die neue Information gesetzt wird.

Wem hilft das?

• Blinde Menschen, die mit Screenreader arbeiten
• Menschen mit Sehbehinderung, die mit Vergrößerung nur einen Ausschnitt sehen
• Menschen mit kognitiven Einschränkungen, die eine klare Bestätigung brauchen

Typische Fehler

• Nach „In den Warenkorb“ ändert sich nur die Zahl am Warenkorb-Symbol, der Screenreader sagt nichts.
• Die Meldung „Danke, Ihre Nachricht wurde gesendet“ erscheint, wird aber nicht angesagt.
• Ein Filter aktualisiert die Trefferliste, ohne die neue Trefferzahl mitzuteilen.
• Der Live-Bereich wird erst zusammen mit der Meldung eingefügt, sodass manche Screenreader ihn übersehen.

So prüfen wir das

• nur Mensch Nur von Hand: Hier lässt sich nichts Sinnvolles messen. Die Prüferin oder der Prüfer testet es direkt.

Prüffrage: Statusmeldungen (in den Warenkorb gelegt, Formular gesendet, Suchergebnisse) werden vom Screenreader ohne Fokuswechsel angesagt.

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<div class="toast">Artikel wurde in den Warenkorb gelegt.</div>

<!-- Beim Laden der Seite leer vorhanden -->
<div role="status" id="meldung"></div>
<script type="module">
  function melden(text) {
    document.getElementById('meldung').textContent = text;
  }
  // nach erfolgreichem Hinzufügen:
  melden('Artikel wurde in den Warenkorb gelegt.');
</script>

Der Text erscheint in einem Statusbereich, den der Screenreader automatisch vorliest, ohne den Fokus zu verschieben.

Praxistipps

• Nutzen Sie role="alert" nur für dringende Meldungen, etwa Fehler. Für Bestätigungen reicht role="status".
• Legen Sie den Live-Bereich schon beim Laden der Seite an und tauschen Sie nur seinen Text aus.

Ratgeber und Muster dazu

• In 30 Minuten zum ersten Screenreader-TestEin Screenreader zeigt schonungslos, ob Ihre Seite sauber aufgebaut ist. Mit dieser Anleitung testen Sie Ihre wichtigsten Seiten selbst, mit kostenlosen Werkzeugen und ohne Vorkenntnisse.
• Statusmeldungen, die ankommen, ohne den Fokus zu stehlenMeldungen per Live-Region ansagen, ohne Fokuswechsel.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 4.1.3 Status Messages