Ein goldener Schimmer auf einer Schaltfläche kann auf eine Aktion hinweisen. Eine endlose Drehung neben einem Absatz kann dagegen vom Lesen ablenken. Entscheidend ist nicht, wie aufwendig der Effekt aussieht, sondern welche Aufgabe er erfüllt. Vervollständigen Sie vor dem Einbau den Satz: „Diese Bewegung hilft Menschen zu verstehen …“. Fehlt eine klare Antwort, handelt es sich um Dekoration, die dem Inhalt den Vorrang lassen sollte. Das ist eine redaktionelle Entscheidungshilfe, kein Versprechen höherer Verkaufszahlen.
Erst die Aktion, dann der Effekt
Eine Artikelkarte erklärt mit ihrer Überschrift das Thema, macht mit einem Auszug neugierig und führt über einen sichtbaren Link zum vollständigen Text. Eine kurze Farbänderung beim Darüberfahren kann diese Aktion unterstützen. Ist der Link ohne Schimmer jedoch nicht von Fließtext zu unterscheiden, muss zuerst die Gestaltung verbessert werden. Prüfen Sie Kontrast, Beschriftung und Position, bevor Sie Bewegung ergänzen. Auf einem Smartphone gibt es keinen dauerhaften Mauszeigerkontakt. Die zentrale Aktion muss deshalb auch ohne Hover-Effekt erkennbar sein.
Drei Fragen für jede Animation
Was löst sie aus: der Seitenaufruf, das Scrollen oder eine bewusste Aktion? Wann endet sie? Bleibt das Ergebnis ohne Bewegung verständlich? Bei einem Menü ist der klar erkennbare offene Zustand wichtiger als ein langer Einflug. Eine Erfolgsmeldung braucht Text, nicht nur einen verschwindenden Funken. Trennen Sie in der Prüfliste dekorative Effekte von Animationen, die Zustandsänderungen vermitteln. So lässt sich der Entwurf sachlicher besprechen als mit „gefällt mir“ oder „gefällt mir nicht“.
Weniger Bewegung bedeutet nicht weniger Inhalt
MDN beschreibt prefers-reduced-motion als Möglichkeit, die Systemeinstellung für weniger nicht notwendige Bewegung zu berücksichtigen. Die Abfrage repariert eine Website nicht automatisch: Gestaltung und Entwicklung müssen eine Alternative festlegen. Eine Drehung kann stoppen, ein großer Einflug durch sofortiges Erscheinen ersetzt werden. Beschriftungen, Menüzugang und verständliche Schaltflächenzustände müssen erhalten bleiben. Blenden Sie nicht den gesamten animierten Bereich aus, wenn darin wichtige Informationen stehen. Prüfen Sie auch JavaScript-Effekte und nicht nur CSS-Animationen.
Angemessene Kontrolle anbieten
Das WCAG-Erfolgskriterium 2.2.2 auf Stufe A behandelt unter anderem bewegte Informationen, die automatisch starten, länger als fünf Sekunden dauern und neben anderen Inhalten erscheinen. Unter den genannten Bedingungen ist eine Möglichkeit zum Pausieren, Stoppen oder Ausblenden erforderlich, sofern die Bewegung nicht wesentlich ist. Für automatisch aktualisierte Informationen gelten gesonderte Bedingungen. Daraus folgt keine allgemeine Erlaubnis für beliebige Animationen unter fünf Sekunden. Kriterium 2.3.3 auf Stufe AAA behandelt separat das Abschalten nicht wesentlicher, durch Interaktion ausgelöster Animation. Ein einzelner Schalter belegt keine WCAG-Konformität der gesamten Website.
Vor der Veröffentlichung praktisch prüfen
Gehen Sie denselben Weg mit normalen Bewegungseinstellungen und mit reduzierter Bewegung: Menü öffnen, Karte lesen, Artikel aufrufen, zurückkehren. Inhalte müssen erreichbar und Zustände verständlich bleiben. Wiederholen Sie den Ablauf mit Tastatur und Smartphone. Prüfen Sie vorhandene Animationssteuerungen auf Zugänglichkeit und klare Beschriftung. Betrachten Sie die Seite außerdem nach einer Minute Lesezeit: Was zunächst reizvoll wirkt, kann später aufdringlich werden. Ziel ist nicht, der Website ihren Charakter zu nehmen, sondern Menschen eine ruhige Nutzung zu ermöglichen.