2️⃣ 4.1.3 - Statusmeldungen

AA 2.1 Umsetzung

Ziel

Statusmeldungen müssen so gestaltet sein, dass sie assistierenden Technologien wie Screen Readern zugänglich sind, ohne dass der Fokus des Benutzers verschoben wird.

Beschreibung

Statusmeldungen informieren Benutzer über Änderungen wie Erfolge, Fortschritte, Fehler oder Wartezustände, ohne die Benutzerinteraktion zu unterbrechen.
Diese Meldungen müssen programmgesteuert erkennbar sein, indem sie mit Rollen oder Eigenschaften (z. B. ARIA-Attribute) versehen werden.
Die Benutzerfreundlichkeit für blinde, sehbehinderte und kognitiv beeinträchtigte Benutzer wird erhöht, indem relevante Statusinformationen ohne Kontextänderungen zugänglich gemacht werden.

Offene Punkte

Was bedeutet das für Onlineshop?
Was ist mit Cookie-Bannern? Modals und Pop-Ups sind keine Statusmeldungen?
Umsetzungsbeispiel: Ein Beispiel erstellen an 2 Buttons, die eine Message Box mit je einem Alert und einem Status befüllen.

Anforderungen

Nutzerfreundliche Platzierung der Meldungen im Design sicherstellen, ohne die Seitenstruktur zu stören.

Die Entscheidung zwischen role=„alert“, role=„status“ und aria-live-Regionen hängt von der Dringlichkeit und dem Kontext der Nachricht ab.
Binden Sie Live-Regionen so ein, dass Statusänderungen für assistierende Technologien lesbar sind, ohne den Fokus zu verschieben. aria-live informiert den Screenreader in Echtzeit und sollte am besten auf Polite stehen Quelle. aria-live muss nur gesetzt werden, wenn der Inhalt der Meldung sich dynamisch ändert. Z.B. durch ein Javascript Event.
Markieren Sie Statusmeldungen so, dass Änderungen vom Screen Reader erkannt und vorgelesen werden.
Achten Sie darauf, dass bei Änderungen von Statustexten der vollständige Kontext (z. B. “3 Artikel im Warenkorb”) verfügbar bleibt und nicht nur ein isoliertes Update wie “3”.
Vermeiden Sie Kontextwechsel, wenn nicht unbedingt notwendig. Meldungen sollten im aktuellen Kontext verfügbar bleiben.

Mit einem Bildschirmlesegerät testen, um die korrekte Implementierung sicherzustellen.
Testen Sie die Meldungen mit Screenreadern, um sicherzustellen, dass sie korrekt erkannt und vorgelesen werden.
Prüfen Sie, ob Statusmeldungen durch aria-live oder ähnliche Attribute korrekt als Live-Regionen markiert sind.
Validieren Sie, dass Meldungen auch bei wiederholten Änderungen konsistent und vollständig angezeigt werden.
Sicherstellen, dass Statusmeldungen keine unerwünschten Kontextänderungen oder Ablenkungen verursachen.

Code-Beispiele

Erfolgsmeldung mit role=“status”:

<div role="status" aria-live="polite">
    Ihre Anfrage wurde erfolgreich gesendet.
</div>

Fehlermeldung mit role=“alert”:

<div role="alert">
    Ungültige Eingabe: Bitte geben Sie eine gültige Postleitzahl ein.
</div>

Fortschrittsanzeige mit role=“progressbar”:

<div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
    Hochladen: 40 % abgeschlossen.
</div>

Dynamische Statusmeldung mit aria-live:

<div id="cart-status" aria-live="assertive">
    Warenkorb: 3 Artikel hinzugefügt.
</div>
<script>
    document.getElementById('cart-status').innerText = 'Warenkorb: 4 Artikel hinzugefügt.';
</script>

Umsetzungsbeispiel

Umsetzungsbeispiel Beispiel Statusmeldungen