Barrierefreiheit

Dynamische Inhalte ohne aria-live-Ankündigung

Üblicher Schweregrad: mittel · Aufwand: mittel

Woran du es erkennst

Inhalte ändern sich ohne Seitenreload (Suchergebnisse, Warenkorb-Zähler, Toast-Meldungen, Formular-Feedback), aber keine aria-live-Region kündigt die Änderung an — Screenreader-Nutzer bemerken sie nicht.

Warum es zählt

Was visuell aufpoppt, existiert für Screenreader-Nutzer schlicht nicht: Die Fehlermeldung nach dem Absenden, der „Zum Warenkorb hinzugefügt"-Hinweis, neue Suchergebnisse — kritisches Feedback geht unter und Nutzer warten auf eine Reaktion, die längst da war.

So behebst du es

  1. Kennzeichne Statusmeldungen mit role="status" (oder aria-live="polite") und Fehler/Warnungen mit role="alert", damit sie automatisch angesagt werden.
  2. Halte die Live-Region im DOM dauerhaft vorhanden und befülle nur ihren Text — dynamisch nachgeladene Regionen werden von vielen Screenreadern nicht erkannt.
  3. Setze bei Ergebnis-Updates (Suche, Filter) den Fokus nicht zwangsweise um, sondern kündige das Ergebnis kurz an („12 Treffer").
  4. Teste mit einem echten Screenreader (NVDA, VoiceOver), ob die wichtigsten Rückmeldungen hörbar ankommen.

Zum Nachlesen