Einsatz von Media Queries für Barrierefreiheit

CSS Media Queries können verwendet werden, um Menschen mit Behinderungen die Nutzung Ihrer Website zu erleichtern.

Reduzierte Bewegung

Blinkende und flackernde Animationen können problematisch sein für Menschen mit kognitiven Beeinträchtigungen wie Aufmerksamkeitsdefizit-Hyperaktivitätsstörung (ADHS). Darüber hinaus können bestimmte Bewegungsarten ein Auslöser für vestibuläre Störungen, Epilepsie, Migräne und skotopische Empfindlichkeit sein. Das Reduzieren oder vollständige Abschalten von Animationen basierend auf den Präferenzen des Benutzers kann auch Nutzern mit niedrigem Batteriestand oder leistungsschwachen Geräten zugutekommen.

Die prefers-reduced-motion Media Query ermöglicht es, Nutzern, die in den Betriebssystemeinstellungen eine Reduzierung von Bewegung aktiviert haben, eine Erfahrung mit weniger Animationen und Übergängen zu bieten. Es gibt zwei mögliche Werte:

no-preference

Zeigt an, dass der Benutzer dem System keine Präferenz mitgeteilt hat.

reduce

Zeigt an, dass der Benutzer dem System mitgeteilt hat, dass er eine Benutzeroberfläche bevorzugt, die die Anzahl an Bewegungen oder Animationen minimiert, vorzugsweise bis zu dem Punkt, an dem alle nicht wesentliche Bewegungen entfernt sind.

Beispiel

Dieses Beispiel hat eine störende Animation, es sei denn, Sie aktivieren die Funktion zur Reduzierung von Bewegungen in Ihren Barrierefreiheitseinstellungen.

HTML

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

CSS

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 durch * {animation: none !important;} erreicht werden könnte. Vielmehr erwarten Benutzer, dass Bewegungsanimationen, einschließlich jener, die durch Benutzerinteraktion ausgelöst werden, deaktiviert werden, es sei denn, die Animation ist wesentlich für die Funktionalität oder die vermittelte Information (siehe WCAG: Animation from Interactions).

Siehe auch