Barrierefreie Website-Animationen beginnen mit einer einfachen Vereinbarung: Menschen sollen eine Seite verstehen und ihre Aufgabe erledigen können, ohne auf dekorative Bewegung angewiesen zu sein. Behalten Sie Animationen bei, die eine sinnvolle Veränderung erklären, bieten Sie bei aktivierter Einstellung für reduzierte Bewegung eine ruhigere Darstellung an und ermöglichen Sie es, fortlaufende Bewegung bei Bedarf selbst zu steuern.
Wer als Unternehmen eine Website beauftragt, steht vor zwei praktischen Fragen: Was gehört ins Briefing, und wie lässt sich das Ergebnis prüfen? Dieser Leitfaden bietet eine Übersicht der Animationen, eine Entscheidungstabelle und eine Checkliste für die Abnahme. Sie können diese für einen neuen Entwurf oder eine bestehende Website nutzen, ohne jedes technische Detail selbst festlegen zu müssen.
1. Geben Sie jedem bewegten Element einen Zweck
Listen Sie zunächst auf, was sich bei einem typischen Besuch auf Ihrer Website bewegt. Öffnen Sie die Startseite, lesen Sie eine Leistungsbeschreibung, klappen Sie eine Frage auf und gehen Sie zum Anfrageformular. Erfassen Sie die Einstiegsanimation, Scroll-Effekte, automatisch wechselnde Slides, Hintergrundvideos, Menüübergänge, Ladeanzeigen und Erfolgsmeldungen. Schauen Sie über den auffälligen Einstiegsbereich hinaus: Auch kleine Effekte können sich über eine Seite hinweg summieren.
Beschreiben Sie für jedes Element, welche Information die Bewegung vermittelt. Ein sich öffnender Bereich kann zeigen, wo zusätzliche Informationen hingehören. Eine Fortschrittsanzeige kann verdeutlichen, dass eine Anfrage noch verarbeitet wird. Ein rotierendes Dekorationselement kann die visuelle Identität unterstützen, darf aber nicht der einzige Weg sein, die Leistung zu entdecken oder die nächste Schaltfläche zu finden.
Halten Sie das gewünschte Ergebnis fest, bevor Sie über Dauer oder Stil sprechen. „Kunden erkennen, welche Frage geöffnet ist“ lässt dem Designteam Spielraum für eine klare Lösung. „Jeder Abschnitt muss ins Bild fliegen“ legt das Projekt auf einen Effekt fest, bevor dessen Nutzen geprüft wurde. Bitten Sie das Team, neben dem animierten Konzept auch eine unbewegte Variante zu zeigen.
Erstellen Sie eine kurze Übersicht der Animationen
Eine hilfreiche Übersicht erfasst Seite, Element, Auslöser, Zweck, mögliche Wiederholungen, das vorgesehene Verhalten bei reduzierter Bewegung und die für die Prüfung zuständige Person. Ergänzen Sie eine Spalte für Nachweise: eine Vorschauadresse, eine Aufnahme oder eine Prüfnotiz. So entsteht ein kompaktes Abnahmedokument, auf das Sie zurückgreifen können, wenn eine neue Kampagne ein weiteres Karussell oder Video einführt.
2. Vereinbaren Sie das Verhalten der ruhigeren Variante
MDN beschreibt prefers-reduced-motion als Möglichkeit für eine Website, den Wunsch nach weniger nicht notwendiger Bewegung zu erkennen. Dieses Signal muss bei der technischen Umsetzung berücksichtigt werden. Das Aktivieren der Geräteeinstellung gestaltet nicht automatisch jede Animation einer Website um.
Legen Sie für jeden Effekt das gewünschte Verhalten fest. Ein großflächiger Zoom könnte durch einen unmittelbaren Zustandswechsel ersetzt werden, ein bewegter dekorativer Hintergrund durch ein Standbild. Eine aufgeklappte Antwort kann erscheinen, ohne über den Bildschirm zu wandern. Akzeptieren Sie „Wir verlangsamen alles“ nicht als vollständiges Konzept: Auch eine langsamere, großflächige Bewegung kann für die Nutzung unnötig sein.
| Element und Zweck | Mögliche ruhigere Darstellung | Frage für die Abnahme |
|---|---|---|
| Dekorative Bewegung im Einstiegsbereich prägt den visuellen Stil | Eine bewusst gestaltete, unbewegte Komposition verwenden | Können Besucher das Angebot sofort lesen und den Hauptlink nutzen? |
| Abschnitte erscheinen beim Scrollen | Inhalte ohne weite Bewegung oder Wartezeit anzeigen | Ist jeder Abschnitt bei schnellem Scrollen und bei Tastaturbedienung verfügbar? |
| Ein Menü zeigt Navigationsmöglichkeiten | An Ort und Stelle öffnen und schließen, mit eindeutig erkennbarem Zustand | Können Besucher die Links erreichen und zum auslösenden Bedienelement zurückkehren? |
| Ein Karussell präsentiert mehrere Angebote | Eindeutige Bedienelemente und einen vereinbarten statischen oder pausierten Zustand vorsehen | Sind alle Angebote erreichbar, ohne mit automatischen Wechseln Schritt halten zu müssen? |
| Ein Formular zeigt Verarbeitung und Abschluss an | Verständlichen Statustext und eine dauerhaft sichtbare Bestätigung beibehalten | Wissen Besucher, ob sie warten, es erneut versuchen oder fortfahren sollen? |
Diese Tabelle ist ein Planungsbeispiel und kein Nachweis dafür, dass eine bestimmte Website einen Standard zur Barrierefreiheit erfüllt. Ersetzen Sie die Zeilen durch die tatsächlichen Komponenten Ihres Projekts. Halten Sie fest, was beim ersten Laden passiert und was geschehen soll, wenn die Einstellung bei geöffneter Seite geändert wird. Bitten Sie die Entwicklung, Komponenten von Drittanbietern zu benennen, deren Verhalten gesondert geprüft werden muss.
3. Unterscheiden Sie Einstellungen, Bedienelemente und Barrierefreiheitskriterien
Die Unterstützung reduzierter Bewegung und eine Pausentaste lösen verwandte, aber unterschiedliche Probleme. Eine Einstellung kann von Anfang an eine ruhigere Darstellung auswählen. Ein sichtbares Bedienelement kann es ermöglichen, fortlaufende Bewegung während des Lesens anzuhalten. Das Briefing sollte beide Funktionen dort erläutern, wo sie relevant sind, statt eine davon als universellen Ersatz zu behandeln.
Das WCAG-2.2-Erfolgskriterium 2.3.3 „Animation durch Interaktionen“ gehört zur Stufe AAA. Es betrifft das Abschalten von Bewegungsanimationen, die durch Interaktion ausgelöst werden, sofern diese nicht für die Funktion oder die Information wesentlich sind. Stellen Sie dieses konkrete Kriterium nicht als Anforderung der Stufe AA dar.
Erfolgskriterium 2.2.2 „Pausieren, beenden, ausblenden“ gehört zur Stufe A. Seine Vorgabe zu bewegten Inhalten greift, wenn die Bewegung automatisch startet, länger als fünf Sekunden dauert und neben anderen Inhalten erscheint; ausgenommen ist Bewegung, die für eine Aktivität wesentlich ist. Zusätzlich enthält es eine eigene Vorgabe für automatisch aktualisierte Informationen, bei der diese Fünf-Sekunden-Ausnahme nicht gilt. Diese Unterschiede sind bei der Prüfung von Karussells, Laufschriften oder animierten Hintergründen wichtig.
Fragen Sie den Anbieter, anhand welcher Kriterien und Konformitätsstufe das Projekt bewertet wird, wer diese Bewertung durchführt und welche Nachweise Sie erhalten. Eine bestandene Checkliste für reduzierte Bewegung belegt keine vollständige WCAG-Konformität. Die Prüfung von Animationen ist ein Teil einer umfassenderen Prüfung, die auch Struktur, Eingabemethoden, Kontrast, Alternativen und weitere Anforderungen berücksichtigt.
Prüfen Sie, ob die Bedienelemente tatsächlich Kontrolle ermöglichen
Eine Pausenfunktion sollte auffindbar, verständlich und mit den vereinbarten Eingabemethoden bedienbar sein. Prüfen Sie, was passiert, wenn der Fokus auf ein anderes Element wechselt oder eine weitere Komponente geöffnet wird. Ein Karussell, das sofort weiterläuft, sobald jemand die Pausentaste verlässt, bietet keine brauchbare Lesepause. Vereinbaren Sie, ob eine Einstellung oder die Entscheidung zum Pausieren beim Seitenwechsel erhalten bleibt, und prüfen Sie anschließend dieses Verhalten.
4. Erhalten Sie die Nutzbarkeit, wenn sich die Bewegung ändert
Die ruhigere Variante muss weiterhin als vollständige Seite funktionieren. Das Entfernen einer Animation darf weder Text unsichtbar lassen noch die Navigation außerhalb des sichtbaren Bereichs halten oder eine Schaltfläche auf das Ende einer Animation warten lassen. Bitten Sie die Entwicklung zu zeigen, dass Inhalte ihren nutzbaren Endzustand auch dann erreichen, wenn die dekorative Sequenz nicht ausgeführt wird.
Verfolgen Sie den Tastaturfokus durch Menüs, Dialoge und aufklappbare Abschnitte. Ist erkennbar, wo Sie sich befinden? Führt das Öffnen einer Komponente in einen sinnvollen Kontext, und bringt das Schließen Sie an die erwartete Stelle zurück? Vermeiden Sie ein Design, bei dem Bewegung der einzige Hinweis auf eine Veränderung ist. Auch klare Beschriftungen, erkennbare Auswahlzustände und ein stabiles Layout sollten die Bedeutung vermitteln.
Achten Sie besonders auf Formulare. Eine sich drehende Form allein erklärt nicht, ob eine Anfrage verarbeitet wird, fehlgeschlagen ist oder erfolgreich war. Fordern Sie klare Statusmeldungen und eine geeignete Übermittlung wichtiger Aktualisierungen an assistive Technologien. Entfernt das Team die Ladeanimation in der ruhigeren Variante, müssen der zugehörige Status und der nächste Handlungsschritt weiterhin verfügbar sein.
Vergleichen Sie bei Inhalten, die sich beim Scrollen bewegen, langsames Scrollen, schnelles Scrollen und Tastaturnavigation. Prüfen Sie, ob Überschriften, Preise oder Bedienelemente verschwinden, bevor sie gelesen werden können. Wesentliche Informationen sollten keine exakt getimte Geste erfordern. Wenn eine visuelle Erzählung eine Abfolge benötigt, vereinbaren Sie einen barrierefreien Zugang zu denselben Informationen, der diese Abfolge nicht voraussetzt.
Ein hypothetisches Prüfbeispiel für eine Leistungsseite
Stellen Sie sich ein Beratungsunternehmen mit einer dekorativen Animation im Einstiegsbereich und einem Anfrageformular vor. In der ruhigeren Variante wird die Animation durch ein Standbild ersetzt, Leistungsdetails erscheinen sofort und das Formular behält seine Verarbeitungsmeldung sowie die Bestätigung bei. Die prüfende Person durchläuft denselben Anfrageprozess in beiden Varianten. Dies veranschaulicht eine Abnahmemethode; es handelt sich weder um ein berichtetes Kundenergebnis noch um ein Versprechen höherer Konversionsraten.
5. Prüfen Sie die fertigen Seiten in beiden Modi
Fordern Sie genau die Vorschauversion an, die veröffentlicht werden soll. Prüfen Sie diese zunächst mit der normalen Bewegungseinstellung und anschließend mit aktivierter Einstellung für reduzierte Bewegung am Gerät oder im Browser. Eine Designdatei kann die Absicht vermitteln, aber nicht belegen, wie die umgesetzte Seite reagiert. Notieren Sie zu jeder Beobachtung Browser, Gerät, Einstellung und Seitenadresse.
Nutzen Sie eine kleine, wiederholbare Auswahl an Aufgaben: das Angebot lesen, die Navigation öffnen, ergänzende Details aufklappen und das Anfrageformular erreichen. Beziehen Sie in einer Testumgebung die vereinbarten Erfolgs- und Fehlerzustände des Formulars ein. Senden Sie keine echten Kundenanfragen, nur um Animationen zu prüfen. Das Projektteam sollte einen sicheren Weg bereitstellen, diese Zustände ohne operative Benachrichtigungen zu untersuchen.
Prüfen Sie auf einem Smartphone und einem Desktopgerät und nutzen Sie neben Touchscreen oder Zeigegerät, soweit anwendbar, auch eine Tastatur. Vergrößern Sie den Text, um festzustellen, ob bewegte Überlagerungen Inhalte verdecken. Wenn ein Effekt vom Darüberfahren mit dem Mauszeiger abhängt, fragen Sie, wie dieselben Informationen per Touch zugänglich sind. Beziehen Sie eingebettete Buchungstools, Videos und andere externe Komponenten ein, die zum Weg Ihrer Kunden durch die Website gehören.
Beschreiben Sie Fehler anhand beobachtbarer Beispiele. „Bei aktivierter reduzierter Bewegung bleibt der Kontaktlink nach dem Öffnen des mobilen Menüs unsichtbar“ ist konkret bearbeitbar. „Die Animation fühlt sich falsch an“ braucht eine genauere Erklärung. Fügen Sie die Schritte, das erwartete Verhalten und bei Bewegungsproblemen eine kurze Aufnahme hinzu. Wiederholen Sie die betroffene Aufgabe nach einer Korrektur in der korrigierten Vorschau.
6. Fordern Sie Nachweise, die zur Aussage passen
Bewahren Sie die Übersicht der Animationen zusammen mit den Ergebnissen auf. Jede Zeile sollte benennen, was geprüft wurde, was bestanden hat, was ungelöst bleibt und wer für den nächsten Schritt verantwortlich ist. Fragen Sie nach den tatsächlich geprüften Seiten und Zuständen statt nach einem Siegel mit der Aufschrift „barrierefrei“. Ein automatisierter Bericht kann einige Probleme aufzeigen; die manuelle Prüfung konkreter Aufgaben macht Verhalten sichtbar, das direkt beobachtet werden muss.
Die Lighthouse-Dokumentation von Chrome erläutert, dass manuelle Barrierefreiheitsprüfungen nicht in den Barrierefreiheitswert einfließen. Ein Wert von 100 belegt daher nicht, dass jede Anforderung an die Barrierefreiheit bewertet wurde. Lassen Sie sich neben dem automatisierten Bericht auch die manuellen Prüfergebnisse zeigen, insbesondere zu Animationssteuerungen und dem vollständigen Anfrageprozess.
Prüfen Sie die Leistung gesondert. Fragen Sie, mit welcher Version, welchem Geräteprofil und unter welchen Bedingungen ein Laborergebnis ermittelt wurde und ob wichtige Interaktionen auch nach dem ersten Laden geprüft wurden. Ein dekorativer Effekt, der auf dem Rechner des Designteams flüssig aussieht, muss weiterhin auf den vereinbarten Zielgeräten bewertet werden. Eine Einstellung für reduzierte Bewegung ist kein verlässlicher Hinweis auf ein langsameres Gerät; auch die normale Darstellung braucht eine angemessene Leistungsprüfung.
Formulieren Sie Aussagen bei der Übergabe präzise. „Diese fünf Komponenten wurden in diesen Browsern mit aktivierter reduzierter Bewegung geprüft“ ist ein nützlicher Nachweis. „Vollständig barrierefrei, weil Animationen deaktiviert sind“ ist keine Schlussfolgerung, die diese Checkliste stützt. Falls eine umfassendere Barrierefreiheitsprüfung zum Projekt gehört, halten Sie deren Umfang und offene Punkte gesondert fest.
7. Verankern Sie Animationen im Briefing und in der Übergabe
Vereinbaren Sie diese Entscheidungen vor der Abnahme schriftlich. Dadurch werden visuelle Wünsche überprüfbar, und künftige Bearbeiter können vermeiden, ein ungelöstes Problem erneut einzuführen.
- Zweck: Jede bewegte Komponente hat eine festgelegte Aufgabe und eine inhaltlich verantwortliche Person.
- Alternative: Das Verhalten bei reduzierter Bewegung ist definiert, umgesetzt und auf den tatsächlichen Seiten geprüft.
- Kontrolle: Fortlaufende Bewegung und automatische Aktualisierungen verfügen über die vereinbarten Bedienelemente und Verhaltensweisen.
- Kontinuität: Inhalte, Tastaturfokus, Statusmeldungen und die zentrale Aufgabe der Kunden bleiben nutzbar.
- Nachweise: Prüfnotizen benennen die Version, Testumgebungen, Ergebnisse und ungelösten Probleme.
- Pflege: Es ist geklärt, wer nach der Veröffentlichung neue Videos, Einbettungen und Kampagnenkomponenten prüfen kann.
Senden Sie Ihre Animationsübersicht, Referenzseiten und den wichtigsten Weg Ihrer Kunden durch die Website mit der Projektanfrage. Unser Leitfaden für ein Website-Projektbriefing hilft, den Gesamtumfang zu strukturieren, und die Checkliste für ein Website-Redesign unterstützt Sie bei der Entscheidung, was auf einer bestehenden Website erhalten und erneut geprüft werden sollte.
Das aktuelle Website-Paket von Digital Studio ist ab EUR 2.190 erhältlich und umfasst bis zu fünf responsive Seiten, SEO-Grundlagen, ein Anfrageformular und die Veröffentlichung auf Ihrer Domain. Prüfen Sie die aktuellen Leistungen und den Umfang und beschreiben Sie Ihre Anforderungen an Animationen und Barrierefreiheit im Website-Briefing. Vereinbaren Sie spezialisierte Prüfungen und zusätzliche Arbeiten ausdrücklich; gehen Sie nicht davon aus, dass ein Paketpreis eine bestimmte Zertifizierung zur Barrierefreiheit zusichert.
