Ein WCAG-Test pr\u00fcft bei Animationen und bewegten Inhalten, ob diese f\u00fcr Menschen mit bestimmten Behinderungen wahrnehmbar, bedienbar und sicher sind. Konkret geht es darum, ob Inhalte Anf\u00e4lle ausl\u00f6sen k\u00f6nnen, ob Nutzer Bewegungen pausieren oder stoppen k\u00f6nnen und ob Animationen die Wahrnehmung oder Bedienung beeintr\u00e4chtigen. Die folgenden Abschnitte beantworten die wichtigsten Fragen rund um WCAG-Kriterien f\u00fcr Animationen, Flackern, Parallax-Effekte und barrierefreie Umsetzung.<\/p>\n
F\u00fcr Animationen und bewegte Inhalte sind in den Web Content Accessibility Guidelines (WCAG) vor allem drei Erfolgskriterien relevant: 2.2.2 (Pausieren, Stoppen, Ausblenden), 2.3.1 (Grenzwert von dreimaligem Aufblitzen) und 2.3.3 (Animation durch Interaktion). Diese Kriterien decken unterschiedliche Risiken ab und gelten f\u00fcr Konformit\u00e4tslevel A beziehungsweise AAA.<\/p>\n
Die Kriterien lassen sich thematisch gruppieren:<\/p>\n
Zus\u00e4tzlich spielen Kriterien zur Tastatursteuerung (2.1.x) eine Rolle, wenn Animationen \u00fcber die Tastatur ausgel\u00f6st oder gesteuert werden sollen. Wer eine Website auf Barrierefreiheit pr\u00fcfen<\/a> m\u00f6chte, sollte diese Kriterien systematisch durchgehen, da sie unterschiedliche Nutzergruppen sch\u00fctzen.<\/p>\n Die WCAG definiert „bewegte Inhalte“ als alle Elemente auf einer Webseite, die sich automatisch bewegen, blinken, scrollen oder aktualisieren und dabei die Aufmerksamkeit des Nutzers beanspruchen. Dazu z\u00e4hlen unter anderem Karussells, Ticker, animierte Banner, Ladeanimationen, automatisch abspielende Videos und scrollende Textbereiche.<\/p>\n Entscheidend f\u00fcr die WCAG-Bewertung sind zwei Merkmale: Ob der Inhalt automatisch startet<\/strong> und ob er l\u00e4nger als f\u00fcnf Sekunden<\/strong> andauert. Nur wenn beide Bedingungen zutreffen, greift Erfolgskriterium 2.2.2. Kurze, einmalige Animationen, die weniger als f\u00fcnf Sekunden dauern, fallen damit nicht unter diese Anforderung.<\/p>\n Nicht gemeint sind rein dekorative Animationen, die keinerlei Information transportieren und keine Ablenkung erzeugen, sowie Animationen, die der Nutzer selbst ausgel\u00f6st hat und die er unmittelbar kontrolliert. Die Abgrenzung ist in der Praxis nicht immer eindeutig: Ein animiertes Hintergrundbild, das subtil scrollt, kann f\u00fcr Menschen mit vestibul\u00e4ren St\u00f6rungen dennoch problematisch sein, auch wenn es technisch unter den Schwellenwert f\u00e4llt.<\/p>\n Beim WCAG-Test wird Flackern anhand der Blitzfrequenz und der betroffenen Bildschirmfl\u00e4che gemessen. Erfolgskriterium 2.3.1 (Level A) besagt, dass Inhalte nicht mehr als dreimal pro Sekunde aufblitzen d\u00fcrfen oder die Blitze unterhalb der allgemeinen Blitz- und Rotblitz-Grenzwerte liegen m\u00fcssen. F\u00fcr die Messung werden spezifische Schwellenwerte aus dem Bereich der Photosensibilit\u00e4tsforschung herangezogen.<\/p>\n Die technische Messung erfolgt \u00fcber spezialisierte Werkzeuge, die Videosequenzen oder animierte Inhalte frameweise analysieren. Das bekannteste frei verf\u00fcgbare Tool f\u00fcr diesen Zweck ist das Photosensitive Epilepsy Analysis Tool (PEAT)<\/strong> des Trace Research and Development Center. Es bewertet, ob ein Inhalt das Risiko eines photosensitiven Anfalls erzeugt.<\/p>\n F\u00fcr automatisierte WCAG-Tests \u00fcber Bibliotheken wie axe-core ist die Blitzmessung nur eingeschr\u00e4nkt m\u00f6glich, da sie eine dynamische Analyse des gerenderten Inhalts erfordert. Statische HTML-Analysen k\u00f6nnen zwar bestimmte CSS-Animationen identifizieren, aber nicht zuverl\u00e4ssig beurteilen, ob die Frequenz den Grenzwert \u00fcberschreitet. Dieser Bereich geh\u00f6rt daher zu jenen, die einen manuellen Test<\/strong> erfordern, um eine belastbare Aussage zu erhalten.<\/p>\n Die WCAG verlangt gem\u00e4\u00df Erfolgskriterium 2.2.2, dass Nutzer automatisch startende, bewegte oder scrollende Inhalte pausieren, stoppen oder ausblenden k\u00f6nnen, wenn diese l\u00e4nger als f\u00fcnf Sekunden andauern und parallel zu anderen Inhalten angezeigt werden. Die Steuerungsm\u00f6glichkeit muss f\u00fcr alle Nutzer zug\u00e4nglich sein, also auch \u00fcber die Tastatur erreichbar.<\/p>\n Konkret bedeutet das f\u00fcr die Umsetzung:<\/p>\n Die Anforderung gilt nicht f\u00fcr Animationen, die f\u00fcr den Betrieb oder die Aktivit\u00e4t wesentlich sind, zum Beispiel ein Ladebalken, der den Fortschritt eines Vorgangs anzeigt.<\/p>\n Bei Parallax-Effekten und CSS-Animationen pr\u00fcft ein WCAG-Test vor allem, ob diese Bewegungseffekte f\u00fcr Menschen mit vestibul\u00e4ren St\u00f6rungen abschaltbar sind und ob sie die Tastatur- oder Screenreader-Bedienung beeintr\u00e4chtigen. Parallax-Scrolling ist ein h\u00e4ufig \u00fcbersehenes Barrierefreiheitsproblem, da es bei manchen Nutzern Schwindel, \u00dcbelkeit oder Desorientierung ausl\u00f6sen kann.<\/p>\n F\u00fcr CSS-Animationen und Parallax-Effekte sind folgende Pr\u00fcfpunkte relevant:<\/p>\nWas versteht die WCAG unter „bewegten Inhalten“?<\/h2>\n
Wie werden Flackern und Blitzen bei einem WCAG-Test gemessen?<\/h2>\n
Welche Anforderungen stellt die WCAG an Pause- und Stopp-Funktionen?<\/h2>\n
\n
Was pr\u00fcft ein WCAG-Test bei Parallax-Effekten und CSS-Animationen?<\/h2>\n
\n
prefers-reduced-motion<\/code> auswerten und Animationen entsprechend deaktivieren oder vereinfachen.<\/li>\n