PreferenceManager.reducedMotion — Eigenschaft · JavaScript-Referenz

Signatur

get PreferenceManager.reducedMotion

Beschreibung

Die schreibgeschützte Eigenschaft reducedMotion der Schnittstelle PreferenceManager (erreichbar über navigator.preferences) liefert ein PreferenceObject. Es steht für die Media-Feature-Präferenz prefers-reduced-motion. Die Eigenschaft gehört zur Web Preferences API.

Mit dem Objekt kann eine Website:

über value den aktuell wirksamen Wert lesen ("reduce" oder "no-preference"),
über override abfragen, ob die Seite den Wert überschrieben hat (sonst null),
über validValues die erlaubten Werte ermitteln,
mit requestOverride(value) einen eigenen Wert für die Seite setzen, zum Beispiel über einen Schalter „Animationen reduzieren“ in den Einstellungen der Website,
mit clearOverride() die Überschreibung wieder entfernen,
über das Ereignis change auf Änderungen reagieren.

Der große Vorteil gegenüber einer eigenen CSS-Klasse: Ein Override wirkt direkt auf die Media-Query @media (prefers-reduced-motion: reduce) und auf matchMedia(). Vorhandenes CSS und JavaScript, das diese Abfragen nutzt, übernimmt die Einstellung also ohne weitere Anpassung.

Rückgabewert

Typ

PreferenceObject

Beschreibung

Ein Objekt mit den Eigenschaften value, override und validValues, den Methoden requestOverride() und clearOverride() sowie dem Ereignis change.

Beispiele

Aktuelle Präferenz auslesen mit Feature-Erkennung

const getMotionPreference = () => {
  // Wenn die API fehlt, auf matchMedia zurückgreifen
  if (navigator.preferences?.reducedMotion) {
    return navigator.preferences.reducedMotion.value;
  }
  return matchMedia('(prefers-reduced-motion: reduce)').matches
    ? 'reduce'
    : 'no-preference';
};

console.log(getMotionPreference());

no-preference

Einstellungsschalter „Animationen reduzieren“ auf der Website

const toggle = document.querySelector('#reduce-motion');
const pref = navigator.preferences?.reducedMotion;

if (pref) {
  toggle.checked = pref.value === 'reduce';

  toggle.addEventListener('change', async () => {
    try {
      if (toggle.checked) {
        await pref.requestOverride('reduce');
      } else {
        // Override entfernen, damit wieder die Systemeinstellung gilt
        await pref.clearOverride();
      }
      console.log('Wirksam:', pref.value, '| Override:', pref.override);
    } catch (err) {
      console.error('Override nicht möglich:', err);
    }
  });
} else {
  toggle.disabled = true;
}

Wirksam: reduce | Override: reduce

Auf Änderungen reagieren

const pref = navigator.preferences?.reducedMotion;

const applyMotion = () => {
  document.documentElement.dataset.motion = pref.value;
  console.log('Bewegungspräferenz:', pref.value);
};

if (pref) {
  applyMotion();
  // Wird bei Systemänderungen und bei Overrides ausgelöst
  pref.addEventListener('change', applyMotion);
  console.log('Erlaubte Werte:', pref.validValues);
}

Bewegungspräferenz: no-preference Erlaubte Werte: ["no-preference", "reduce"]

// Wichtig · Fallstricke

Experimentell: Die Web Preferences API steckt noch im Entwurfsstadium. Sie gibt es bisher nur in Chromium-basierten Browsern und nur hinter einem Flag bzw. in einem Origin Trial. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vor der Nutzung immer mit navigator.preferences?.reducedMotion, ob sie vorhanden ist, und greife sonst auf matchMedia('(prefers-reduced-motion: reduce)') zurück.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wie navigator.preferences.reducedMotion = … hat keine Wirkung. Werte werden nur über requestOverride() geändert.
requestOverride() gibt ein Promise zurück. Es wird abgelehnt, wenn der Wert ungültig ist (siehe validValues). Behandle Fehler deshalb immer.
Überschreibungen gelten nur für den eigenen Origin. Wie lange sie gespeichert bleiben, entscheidet der Browser. Zeige den Nutzern trotzdem einen Weg, zur Systemeinstellung zurückzukehren (clearOverride()).
Aus Gründen der Barrierefreiheit: Setze "no-preference" nicht eigenmächtig gegen den ausdrücklichen Wunsch der Nutzer. Übermäßige Bewegung kann bei Menschen mit vestibulären Störungen Beschwerden auslösen.

Siehe auch

PerformanceScriptTiming.pauseDuration PreferenceManager.reducedData PreferenceManager.reducedTransparency PreferenceManager.contrast PreferenceManager.colorScheme