Ressourcen · 66
Animation: reduzierte Bewegung, Pause und Verständnis überprüfen
Bewegung inventarisieren, reduziertes Verhalten anbieten und testen, dass Fortschritt, Zustand und Navigation auch ohne Animation verständlich bleiben.
Aktualisiert · 3 min
Wozu dieser Leitfaden beiträgt
- Inventarauslöser
- Reduziertes Verhalten definieren
- Separate WCAG-Kriterien
- Testen Sie alle Implementierungen
Kurzcheck
- Verhindert reduzierte Bewegung jegliche Animation?
- Ist Kriterium 2.3.3 Stufe AA?
- Reicht eine globale CSS-Regel aus?
Schritt-für-Schritt-Anleitung
- 1
Inventarauslöser
Listet automatische, durch Interaktion ausgelöste und durch Scrollen verknüpfte Bewegungen auf. Trennen Sie Zustandsinformationen von der Dekoration. Überprüfen Sie auch JavaScript-Animationen, Videos und eingebettete Elemente.
Liefergegenstand: Wirkungs- und Zweckverzeichnis.
- 2
Reduziertes Verhalten definieren
Preferred-Reduced-Motion signalisiert den Wunsch, nicht wesentliche Bewegungen zu reduzieren. Bieten Sie eine statische oder leisere Alternative unter Beibehaltung von Informationen und Kontrollen. Vermeiden Sie es, große Übersetzungen durch einen anderen ablenkenden Effekt zu ersetzen.
Lieferbar: reduziertes Verhalten pro Komponente.
- 3
Separate WCAG-Kriterien
Das Interaktionsanimationskriterium 2.3.3 ist Stufe AAA. Das Level-A-Kriterium 2.2.2 deckt unter anderem bestimmte automatische Bewegungen ab, die länger als fünf Sekunden dauern, zusammen mit anderen Inhalten, sofern sie nicht unbedingt erforderlich sind. Überprüfen Sie die Bedingungen des anwendbaren Kriteriums.
Liefergegenstand: Kriterien und Kontrollen für jeden Effekt.
- 4
Testen Sie alle Implementierungen
Voreinstellungen vor dem Laden und während einer Sitzung emulieren. Untersuchen Sie Stile, Skripte und programmatisches Scrollen. Wenn der Status vom Abschluss der Animation abhängt, stellen Sie eine zuverlässige Schlussfolgerung sicher, auch wenn die Animation entfernt wird.
Lieferinhalt: Kaltlast-, Live-Change- und Endzustandsversuche.
- 5
Informationen und Kontrollen bewahren
Übungslesen, Tastatur- und Fehlerfeedback in beiden Modi. Testen Sie bei beeinträchtigter automatischer Bewegung Pause, Stopp oder Ausblenden sowie die Stabilität während des Lesens. Dokumentieren Sie Ausnahmen, anstatt jede Animation als wesentlich zu bezeichnen.
Liefergegenstand: Beweise und Einschränkungen.
Wiederverwendbares Arbeitsblatt
Ergänzen Sie Ihre autorisierten Beobachtungen. Bei diesen Feldern handelt es sich um eine Arbeitsvorlage, nicht um beobachtete Ergebnisse.
| Feld | Zu erfassende Informationen |
|---|---|
| Wirkung | Auslöser, Dauer und Informationen |
| Alternative | Reduzierte Version und Endzustand |
| Kriterium | Niveau, Bedingungen und Kontrolle |
| Testversion | Präferenz, Tastatur, Ergebnis und Limit |
Fiktives Arbeitsbeispiel
Beispielhafte Situation
Fiktives Beispiel: Ein Panel wird erst aktiv, nachdem sein Übergang abgeschlossen ist.
Entscheidung und erwartete Beweise
Die Akzeptanz im reduzierten Modus verrät das Warten; Die Komponente schließt ihre Zustandsänderung unabhängig von der Animationsdauer ab.
Unterscheiden Sie die Mechanismen
| Mechanismus | Zweck | Überprüfung oder Einschränkung |
|---|---|---|
| Präferenz für reduzierte Bewegung | An Systemauswahl anpassen | Überprüfen Sie auch Skripte |
| Steuerung pausieren | Steuerung beeinflusst automatische Bewegung | Machen Sie es tastaturbedienbar |
| Statischer Zustand | Behalten Sie Informationen ohne Bewegung bei | Fortschritts- oder Fehlerrückmeldungen nicht entfernen |
Managementindikatoren
| Indikator | Was es misst | Erste Aktion |
|---|---|---|
| Angepasste Effekte | Antrag mit geprüften Alternativen | Einbettungen und Scrollen einschließen |
| Erhaltene Aufgaben | Fahrten im reduzierten Modus zurückgelegt | Animationsabhängige Zustände prüfen |
| Arbeitskontrollen | Pause bzw. Stopp tatsächlich wirksam | Lebenslauf und Tastatur prüfen |
Häufige Fallstricke
- Überprüfen Sie auch Skripte
- Machen Sie es tastaturbedienbar
- Fortschritts- oder Fehlerrückmeldungen nicht entfernen
Häufig gestellte Fragen
Verhindert reduzierte Bewegung jegliche Animation?
Nein. Es drückt eine Präferenz aus; Wählen Sie eine angemessene Anpassung und bewahren Sie die erforderlichen Informationen auf.
Ist Kriterium 2.3.3 Stufe AA?
Nein, es ist AAA. Für die automatische Bewegung oder das Blinken können andere Kriterien gelten.
Reicht eine globale CSS-Regel aus?
Es kann viele Effekte reduzieren, aber möglicherweise keine Skripte, Videos oder Integrationen steuern. Testen Sie tatsächliche Komponenten.
Offizielle Referenzen
Die Referenzen unterstützen die Methode. Passen Sie die Prüfungen an Ihren Kontext an; sie stellen keine Zertifizierung dar. Originalreferenztitel und Quelldokumente können in einer anderen Sprache verfasst sein.
Referenzen geprüft am .
