WCAG 4.1.3 Statusmeldungen

Das Erfolgskriterium 4.1.3 sorgt dafür, dass Screenreader-Nutzer die kurzen Meldungen hören, die sehende Nutzer auf der Seite erscheinen sehen. Drückt ein Kunde „In den Warenkorb“ und erscheint in der Ecke ein kleiner Hinweis „In den Warenkorb gelegt“, hört ein blinder Kunde womöglich nichts und drückt den Button noch einmal. Es gehört zur Konformitätsstufe AA und steht in EN 301 549 als Abschnitt 9.4.1.3. Das BFSG verweist über die harmonisierte Norm EN 301 549 auf diese Anforderungen.

Was das Erfolgskriterium verlangt

Bei Inhalten in Auszeichnungssprachen sind Statusmeldungen über Rolle oder Eigenschaften programmatisch ermittelbar, sodass assistive Technologien sie darstellen können, ohne dass die Meldung den Fokus erhält.

Eine Statusmeldung ist eine Inhaltsänderung, die kein Kontextwechsel ist und den Nutzer informiert über:

• Erfolg oder Ergebnis einer Aktion („In den Warenkorb gelegt“, „Gutschein eingelöst“, „12 Produkte gefunden“);
• einen Wartezustand („Wird geladen …“);
• den Fortschritt eines Prozesses („Hochladen 40 %“);
• das Vorliegen von Fehlern („3 Felder müssen korrigiert werden“).

Nicht erfasst: Meldungen, die durch Verschieben des Fokus übermittelt werden (etwa ein modaler Dialog), und Inhalte, die durch Öffnen von Menüs, Tabs oder Akkordeons erscheinen — sie werden über Fokus oder Zustandsänderungen angesagt. Die Ergebnisliste selbst ist keine Statusmeldung; die Anzahl der Ergebnisse schon.

Typische Fehler in Onlineshops

• ein Toast „In den Warenkorb gelegt“ oder eine aktualisierte Artikelzahl im Mini-Warenkorb, die nicht in einer Live-Region steht;
• Filter, die das Produktraster und die Anzahl „24 Produkte“ stillschweigend aktualisieren;
• ein Gutscheinfeld, das „Code eingelöst“ oder „Code abgelaufen“ ohne Rolle anzeigt;
• Fehlerzusammenfassungen, die nach dem Absenden erscheinen, während der Fokus auf dem Button bleibt, ohne role="alert";
• „Weitere Produkte werden geladen …“ beim Endlos-Scrollen nur als Spinner-Bild;
• das umgekehrte Problem: role="alert" oder aria-live="assertive" bei Routinemeldungen, was Nutzer ständig unterbricht.

So prüfen Sie es

Automatisch: Unser Checker hat für dieses Kriterium keine Regel. Er löst die Aktionen nicht aus, durch die Statusmeldungen erscheinen, deshalb ist eine manuelle Prüfung nötig.

Manuell: Schalten Sie einen Screenreader ein (NVDA, VoiceOver). Legen Sie ein Produkt in den Warenkorb, setzen und entfernen Sie einen Filter, geben Sie einen falschen Gutschein ein, senden Sie ein Formular mit Fehlern ab, laden Sie weitere Produkte. Hören Sie, ohne den Fokus zu bewegen, ob jede sichtbare Meldung angesagt wird. Prüfen Sie in den Entwicklertools, ob der Container der Meldung role="status", role="alert", role="log" oder aria-live hat und ob er bereits auf der Seite existiert, bevor der Text eingefügt wird.

So beheben Sie es

• Legen Sie beim Laden der Seite einen leeren Container mit role="status" (oder aria-live="polite") an und fügen Sie den Meldungstext dort ein.
• Verwenden Sie role="alert" nur für Fehler und dringende Meldungen.
• Lassen Sie die ganze Meldung ansagen, zum Beispiel „3 Artikel im Warenkorb“, mit aria-atomic="true", wenn sich nur ein Teil davon ändert.
• Geben Sie Spinnern in der Live-Region eine Textentsprechung wie „Produkte werden geladen“.

Verwandte Kriterien

• 3.3.1 Fehlererkennung — Fehler werden als Text beschrieben.
• 3.2.2 Bei Eingabe — Inhalte aktualisieren statt den Kontext zu wechseln.
• 4.1.2 Name, Rolle, Wert — Bedienelemente melden ihren Zustand an assistive Technologien.

Häufige Fragen

Was ist eine Statusmeldung in den WCAG?

Eine Inhaltsänderung, die kein Kontextwechsel ist und den Nutzer über Erfolg oder Ergebnis einer Aktion, einen Wartezustand, den Fortschritt eines Prozesses oder das Vorliegen von Fehlern informiert. Beispiele: „In den Warenkorb gelegt“, „12 Ergebnisse“, „Wird gespeichert …“.

Sollte ich role="status" oder role="alert" verwenden?

Verwenden Sie role="status" (eine höfliche Live-Region) für die meisten Meldungen wie Warenkorb-Updates und Ergebniszahlen. Reservieren Sie role="alert" für wichtige, zeitkritische Meldungen wie Fehler, damit Screenreader nicht ständig unterbrochen werden.

Ist ein Dialog, der den Fokus übernimmt, eine Statusmeldung?

Nein. Wandert der Fokus zur Meldung, wie bei einem modalen Dialog, wird sie bereits angesagt, und 4.1.3 gilt nicht. Das Kriterium betrifft Meldungen, die erscheinen, während der Fokus bleibt, wo er ist.

Kann ein automatischer Checker 4.1.3 prüfen?

Nein. Der Checker sieht die Seite nach dem Laden, legt aber keine Produkte in den Warenkorb und sendet keine Formulare ab, daher sieht er die Meldungen nicht erscheinen. Hier ist eine manuelle Prüfung mit einem Screenreader nötig.