Prüfpunkt 4.1.3Stufe AAHilfstechnik: Name, Rolle, Status
Wie erfahren blinde Besucher von Statusmeldungen einer Website?
Blinde Besucher erfahren von Statusmeldungen nur, wenn die Website sie technisch als Meldung kennzeichnet — dann sagt das Vorleseprogramm sie automatisch an, ohne dass der Besucher seine aktuelle Position verlässt. Erscheint die Meldung „Artikel wurde in den Warenkorb gelegt“ nur optisch am Bildschirmrand, bleibt sie für Vorleseprogramme stumm. Das WCAG-Kriterium 4.1.3 verlangt, dass Statusmeldungen programmatisch als solche erkennbar sind.
Eine stumme Meldung ist wie ein Nicken am Telefon
Statusmeldungen begleiten fast jede Handlung im Web: „Artikel im Warenkorb“, „3 Ergebnisse gefunden“, „Ihre Nachricht wurde gesendet“, „Formular wird geladen“. Sehende Besucher nehmen sie beiläufig wahr. Ein blinder Besucher hat seinen Fokus aber woanders — etwa noch auf der Schaltfläche, die er gerade gedrückt hat. Erscheint die Bestätigung nur optisch, erfährt er nie, ob seine Handlung gewirkt hat. Er drückt erneut, legt den Artikel doppelt in den Warenkorb oder gibt verunsichert auf. Die Lösung: Der Meldungsbereich wird im Quelltext als Statusbereich gekennzeichnet. Vorleseprogramme beobachten solche Bereiche und sagen neue Inhalte von selbst an — der Besucher bleibt an seiner Position und hört trotzdem die Bestätigung.
So prüft der Prüfservice die Statusmeldungen
Die automatische Messung mit axe-core prüft die technische Seite vorhandener Meldebereiche: Sind die Kennzeichnungen gültig und regelkonform eingesetzt, sodass Hilfsprogramme sie auswerten können. Die entscheidende Frage geht darüber hinaus: Wird jede Meldung, die im Lauf einer echten Bedienung entsteht, auch wirklich angesagt. Das lässt sich nur beurteilen, indem jemand die Website bedient und zuhört. Unser Bericht weist diesen Teil deshalb offen als manuellen Prüfpunkt aus. Beim Gold-Standard löst ein Mensch typische Handlungen aus — etwas in den Warenkorb legen, ein Formular absenden, eine Suche starten — und prüft mit dem Vorleseprogramm, ob die Bestätigung hörbar ankommt. Eine leere Prüfung gilt bei uns als Fehler, nie als Freibrief.
Beispiele
Warenkorb-Meldung nur sichtbar
<div class="toast">Artikel im Warenkorb</div><div role="status" aria-live="polite">Artikel im Warenkorb, jetzt 3 Artikel</div>Mit role="status" wird die Meldung angesagt, ohne den Fokus zu verschieben. Für Fehler mit Handlungsbedarf: role="alert".
So gehen Sie es an
- Sammeln Sie alle Statusmeldungen Ihrer Website: Warenkorb-Bestätigungen, Suchtreffer-Zähler, Sendebestätigungen, Ladehinweise.
- Bitten Sie Ihre Agentur, die Meldungsbereiche im Quelltext als Statusbereiche zu kennzeichnen, damit Vorleseprogramme sie ansagen.
- Testen Sie mit dem in Ihrem Betriebssystem eingebauten Vorleseprogramm, ob die Meldung nach der Handlung hörbar angesagt wird.
- Halten Sie Statusmeldungen kurz und eindeutig — angesagt wird der Text wortwörtlich, lange Meldungen ermüden beim Zuhören.
Weiter im Prüfbereich Barrierefreiheit
- Wann braucht ein Video eine Gebärdensprach-Übersetzung?WCAG 2.2 Kriterium 1.2.6 (Stufe AAA): aufgezeichnete Videos mit Ton bekommen eine Gebärdensprach-Übersetzung. Für wen das zählt, was es kostet, wie wir es einordnen.
- Wann braucht ein Video eine erweiterte Audiodeskription?WCAG 2.2 Kriterium 1.2.7 (Stufe AAA): Wenn Pausen im Ton für die Bildbeschreibung fehlen, wird das Video angehalten. Wer das braucht und wie es entsteht.
- Wann braucht ein Video ein vollständiges Transkript?WCAG 2.2 Kriterium 1.2.8 (Stufe AAA): Zu jedem aufgezeichneten Video gehört ein Text, der Ton und Bild vollständig wiedergibt. Was hineingehört und wie er entsteht.
- Wie wird ein Live-Audio-Stream zugänglich?WCAG 2.2 Kriterium 1.2.9 (Stufe AAA): Live-Audio ohne Bild bekommt eine gleichwertige Textalternative, etwa eine Live-Mitschrift. Was gilt und wie es geht.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
Foto: Michal Klajban, CC BY-SA 3.0
.JPG){kind=link}