Verwendung von Media Queries für Barrierefreiheit

Reduzierte Bewegung

Blinkende und flackernde Animationen können problematisch für Menschen mit kognitiven Einschränkungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS) sein. Darüber hinaus können bestimmte Arten von Bewegungen ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und Skotopische Empfindlichkeit sein. Das Reduzieren von Animationen oder das vollständige Abschalten von Animationen basierend auf den Vorlieben des Benutzers kann auch Benutzern mit niedrigem Batteriestand oder Geräten mit geringem Leistungsvermögen zugutekommen.

Die prefers-reduced-motion Media Query ermöglicht es, Benutzern, die die Barrierefreiheitseinstellungen ihres Betriebssystems auf reduzierte Bewegung gesetzt haben, ein Erlebnis mit weniger Animationen und Übergängen zu bieten. Es gibt zwei mögliche Werte:

no-preference

Zeigt an, dass der Benutzer keine Präferenz bekannt gegeben hat.

reduce

Zeigt an, dass der Benutzer das System darüber informiert hat, dass er eine Benutzeroberfläche bevorzugt, die die Menge an Bewegung oder Animation minimiert, vorzugsweise bis zu dem Punkt, an dem alle nicht wesentlichen Bewegungen entfernt werden.

Beispiel

Dieses Beispiel enthält eine nervige Animation, es sei denn, Sie aktivieren die reduzierte Bewegung in Ihren Barrierefreiheitseinstellungen.

HTML

<div class="animation">animated box</div>

CSS

.animation {
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
  }
}

Der Wert von prefers-reduced-motion ist reduce, nicht "none". Diese Präferenz bedeutet nicht, dass alle Animationen entfernt werden müssen, was mit * {animation: none !important;} erreicht werden könnte. Vielmehr erwarten Benutzer, dass Bewegungseffekte, einschließlich derjenigen, die durch Benutzerinteraktionen ausgelöst werden, deaktiviert sind, es sei denn, die Animation ist wesentlich für die Funktionalität oder die übermittelte Information (siehe WCAG: Animation from Interactions).

Siehe auch

• prefers-contrast: zum Anpassen von Seitenstilen basierend auf der Kontrastvorliebe des Benutzers
• prefers-reduced-transparency
• prefers-color-scheme
• inverted-colors
• Designing With Reduced Motion For Motion Sensitivities