ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Kompliziert
- Dauer:Kann dauern
Wichtig für Rolle:
Entwicklung
Worum gehts?
Wenn eine Webseite Statusnachrichten oder Benachrichtigungen einblendet, sollten diese auch von Screenreader-Usern automatisch vorgelesen werden – ohne den Fokus zu verschieben. Dafür kannst du ARIA-Live-Regions verwenden.
Umsetzung
Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.
Statusnachrichten sind für Screenreader verständlich
Verwenden Sie ARIA-Live-Regionen, um Statusmeldungen automatisch an Screenreader zu übermitteln, ohne den Fokus zu verändern.
Dabei können Sie aria-live=”polite” für nicht zeitkritische Informationen (z. B. “Artikel in den Warenkorb gelegt”) nutzen und aria-live=”assertive” für wichtige Meldungen, die den Nutzer sofort erreichen müssen (z. B. Fehlermeldung beim Absenden eines Formulars). Polite ist im Zweifel die sicherere Wahl, um Unterbrechungen zu vermeiden.
Achten Sie darauf, in den Live-Regionen nur den Text anzusagen, der wichtig ist. Vermeiden Sie unnötige Details.
Beispiel: <div aria-live=”polite”>Ihre Änderungen wurden gespeichert.</div>
WCAG-Technik(en) in Englisch:
- ARIA22: Nutze role=status zu Anzeige von Statusmeldungen
- ARIA19: Nutze die ARIA role=alert oder Live Regions zum Identifizieren von Fehlern
- G199: Bereitstellung einer Erfolgsrückmeldung bei erfolgreicher Datenübermittlung
- G84: Bereitstellung einer Textbeschreibung, wenn der Benutzer Informationen eingibt, die nicht in der Liste der zulässigen Werte enthalten sind
- G85: Bereitstellung einer Textbeschreibung, wenn die Benutzereingabe nicht im erforderlichen Format oder den erforderlichen Werten liegt
Anmerkungen
Ausnahme: Fehlermeldung über Dialog
Normalerweise sollen Statusmeldungen den Fokus nicht verschieben.
Eine Ausnahme gilt aber für Fehlermeldungen, die in einem Dialogfenster erscheinen. Hier darf der Fokus direkt in den Dialog gesetzt werden, damit die Nutzer die Meldung sofort wahrnehmen und reagieren können.
Barrierfrei Entwickeln?
Unser Workshop fürs Entwickler*innen!
Lerne in unserem Workshop alles, was du in der Entwicklung wissen musst, um barrierefreie Webseiten zu entwickeln!
