Beim barrierefreien Webdesign unterscheidet man bei dynamischen Inhaltsänderungen grundlegend zwei Arten der Interaktion: Änderungen, die informieren, und Änderungen, die den Fokus verschieben.
1. Änderungen, die informieren (Passive Feedback-Events)
Hier bleibt der Nutzer an seiner aktuellen Position. Die Änderungen werden dem Screenreader im Hintergrund mitgeteilt, ohne die Eingabe oder Navigation zu unterbrechen. Dies geschieht primär über WAI-ARIA Live Regions (aria-live="polite" oder "assertive") sowie passende Status-Rollen.
- Formular- & Validierungs-Meldungen: Inline-Fehler oder Erfolgsnotizen beim Verlassen eines Feldes (
blur) werden direkt angesagt, ohne den Fokus zu verschieben. - Status- & Lade-Updates: Toast-Notifications ("Entwurf gespeichert"), Progress Bars (
role="progressbar") oder das Laden neuer Inhalte bei Infinite Scroll informieren den Nutzer dynamisch über den aktuellen Systemstatus. - Autocomplete & Suchvorschläge: Screenreader melden z. B. die Anzahl der gefundenen Ergebnisse, während der Nutzer weiter tippen oder mit den Pfeiltasten navigieren kann (
aria-expanded,aria-activedescendant).
2. Änderungen, die den Fokus verschieben (Aktives Fokus-Management)
Hier erfordert die Änderung die direkte Aufmerksamkeit des Nutzers. Der Tastaturfokus muss per JavaScript gezielt auf das neue Element oder den geänderten Bereich gesetzt werden (element.focus()).
- Modals (Dialogfenster): Nach dem Öffnen wandert der Fokus direkt in den Modal-Dialog. Um Verwirrung zu vermeiden, wird ein Focus Trap eingesetzt (der Tastaturfokus bleibt innerhalb des Modals) und die restliche Seite ausgeblendet (
aria-modal="true",aria-hidden="true"). - Popouts, Flyouts & Menüs: Klappmenüs oder Dropdowns öffnen sich und erwarten oft eine direkte Interaktion oder die Navigation per Tastatur.
- Struktur- & Seitenwechsel (z. B. SPAs): Bei Single Page Applications ohne sichtbaren Page-Reload wird nach dem Laden der neuen Seite der Seitentitel aktualisiert und der Fokus direkt auf die Hauptüberschrift gesetzt.