Simulieren einer reduzierten Bewegung

  • Artikel

CSS-Animation kann ein Problem mit der Barrierefreiheit sein. Betriebssysteme können dieses Problem beheben, indem sie eine Option zum Deaktivieren von Animationen einschließen, um Benutzerverwechslungen und potenzielle gesundheitsbezogene Probleme wie das Auslösen von Anfällen zu vermeiden.

Auf einer Webseite können Sie die CSS-Medienabfrage prefers-reduced-motion verwenden, um die Vorliebe des Benutzers für Animationen zu erkennen. Umschließen Sie dann Ihren Animationscode in einen Test, um Animationen bedingt auszuführen. Beispiel:

header {
  /* The header element is animated */
  animation: slidein 1s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  /* The user prefers reduced motion */
  .header {
    /* Turn off the animation for the header element */
    animation: none;
  }
}

Um zu testen, dass Ihr Code wie erwartet funktioniert, ohne ihre Betriebssystemeinstellung ändern zu müssen, simulieren Sie die Einstellung für die reduzierte Bewegung des Betriebssystems in DevTools:

  1. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus. Oder drücken Sie STRG+UMSCHALT+I (Windows, Linux) oder BEFEHL+WAHL+I (macOS). DevTools wird geöffnet.

  2. Drücken Sie in DevTools STRG+UMSCHALT+P (Windows/Linux) oder BEFEHL+UMSCHALT+P (macOS), um das Befehlsmenü zu öffnen.

  3. Beginnen Sie mit der Eingabe reduziert, wählen Sie die Option EMULATE CSS prefers-reduced-motion aus, und drücken Sie dann die EINGABETASTE:

    Die Option

  4. Aktualisieren Sie die Webseite, und überprüfen Sie, ob Ihre Animationen ausgeführt werden.

Siehe auch