Sind UI-Animationen für Screenreader-Nutzer zugänglich?
Erfahren Sie, wie UI-Animationen mit Bildschirmlesern interagieren: aria-live-Bereiche, aria-expanded, aria-busy und saubere Fokusführung.
Kernaussage
UI-Animationen sind für Screenreader-Nutzer nur dann barrierefrei, wenn visuelle Wechsel von korrekten ARIA-Attributen und sauberer Fokusführung begleitet werden. Bildschirmleser verarbeiten keine Pixelbewegungen, sondern DOM-Veränderungen und ARIA-Zustände. Visuelle Animationen dürfen Sprachausgaben niemals verzögern oder den Tastaturfokus irritieren.
Die Unsichtbarkeit von CSS-Bewegung für Hilfstechnologien
Ein Screenreader liest den Barrierefreiheitsbaum, nicht gezeichnete Pixel. Die visuelle Transformation eines Burger-Icons zum Schließkreuz nützt blinden Nutzern nichts, wenn der zugrundeliegende Button sein aria-expanded-Attribut nicht aktualisiert und sein Name nicht von 'Menü öffnen' zu 'Menü schließen' wechselt.
aria-live-Bereiche für dynamische Rückmeldungen
Erscheint ein Toast-Hinweis, erfassen sehende Nutzer ihn sofort. Um dies Screenreadern ohne Raub des Tastaturfokus mitzuteilen, setzen Sie aria-live='polite' ein. Reservieren Sie aria-live='assertive' für dringliche Systemfehler.
- Schalten Sie aria-expanded an Auslösern von Akkordeons und Modaldialogen um
- Nutzen Sie aria-live='polite' für Bestätigungsbanner und Toast-Hinweise
- Blenden Sie dekorative Partikel, Konfetti und Schmuckgrafiken mit aria-hidden='true' aus
- Verzögern Sie DOM-Attribut-Updates niemals bis zum Animationsende
Fokusführung während der Übergänge
Öffnet sich ein Dialog oder Ausklappmenü, verschieben Sie den Tastaturfokus unmittelbar mit Beginn der Bewegung auf das erste Element. Warten Sie nicht das Ende einer 300 ms langen Animation ab, da schnelle Tastaturnutzer sonst versehentlich im Hintergrund weitertabben.
Das aria-busy-Attribut bei asynchronem Laden
Beim Animieren eines Skeleton Screens kennzeichnen Sie den Container mit aria-busy='true'. Das signalisiert Hilfsmitteln, dass der Bereich gerade aktualisiert wird, und verhindert bruchstückhaftes Vorlesen unfertiger Daten.
Wichtige Prinzipien
- Screenreader interpretieren semantische Zustände (ARIA), keine visuellen Keyframes
- Aktualisieren Sie ARIA-Attribute direkt bei der Eingabe, nicht erst nach Animationsende
- Setzen Sie den Fokus sofort beim Aufklappen von Dialogen
- Verbergen Sie rein dekorative Effekte mit aria-hidden vor dem Barrierefreiheitsbaum