prefers-reduced-motion in CSS
Bewegung abschalten, Inhalt behalten
Lauftext, Blinken, Autoplay-Ton: drei Quellen unruhiger Seiten.
Bewegung mit Ersatzbild
Reduzieren heißt: Information stehen lassen
Drei Storyboards zeigen, wie Bewegung durch klare Zustände ersetzt wird.
no-preferencereducePosition und Größe springen auf den Zielzustand, ohne Zwischenbilder.
- Aufzug bereit
- Werkstatt ab 9 Uhr
- Neuer Kurs
Alle Hinweise bleiben vorhanden und können in eigenem Tempo gelesen werden.
Der Effekt entfällt. Text, Symbol und Status bleiben als Rückmeldung erhalten.
no-preference bedeutet nur, dass keine Reduktionspräferenz bekannt ist; es ist keine Bitte um mehr Animation. Bewegung nach ihrer Aufgabe behandeln
Die Ersatzdarstellung folgt dem Zweck, nicht der Animationstechnik.
Bei reduce direkt zum Zielzustand wechseln.
Startet er automatisch, läuft länger als fünf Sekunden und steht neben anderem Inhalt, braucht er eine Pause-, Stopp- oder Ausblendmöglichkeit.
Status als Text oder Fortschrittswert erhalten; nur die Schleife entfällt.
Die ruhige Version ist die Basis
So bleibt die vollständige Darstellung auch dann stabil, wenn eine ältere Umgebung die Medienabfrage nicht kennt. Bewegung kommt ausschließlich als Zusatz hinzu.
.panel {
transform: none;
}
.hinweise {
display: grid;
}
@media (prefers-reduced-motion: no-preference) {
.panel {
animation: einblenden 320ms ease-out;
}
}
@keyframes einblenden {
from { transform: translateX(2rem); }
}
Vier Zustände für die Abnahme
Inhalt, Reihenfolge und Bedienung bleiben vollständig.
Automatische Dauerbewegung lässt sich per Tastatur stoppen.
Eine sichtbare Schaltfläche darf nicht ohne Funktion zurückbleiben.
CSS reagiert ohne Neuladen; Skript hört bei Bedarf auf change.
Quellen für Umsetzung und Prüfung
Aus dem Prüfbericht
Drei Quellen, drei Befunde
Kritisch Lauftext im Hinweisband Regel marquee
Das marquee-Element bewegt den Text dauerhaft. Ein statischer Absatz an derselben Stelle bleibt lesbar.
Kritisch Blinkender Hinweis neben dem Text Regel blink
Das blink-Element ist veraltet und lenkt vom Lesen ab. Ein span mit Auszeichnung im CSS ersetzt es.
Prüfen Ton startet von allein Regel no-autoplay-audio
Ein audio mit autoplay überlagert die Sprachausgabe. Geben Sie dem Player controls oder starten Sie ihn erst auf Klick.
Zum Mitnehmen
Die Bewegung, korrigiert
Eine Medienabfrage, zwei entfernte Elemente.
Korrektur in 3 Schritten ansehen
Animationen bei Bedarf anhalten
Die Medienabfrage übernimmt die Systemeinstellung. Übergänge laufen dann nicht mehr ab, Inhalt und Bedienung bleiben unverändert.
KorrekturvergleichSchritt 1 · CSS Vorher
.karte { transition: transform 400ms ease; }Nachher
.karte { transition: transform 400ms ease; } @media (prefers-reduced-motion: reduce) { .karte { transition: none; } }Markierte Zeilen wurden geändert
So prüfen Sie es Stellen Sie im System „Bewegung reduzieren“ ein und laden Sie neu. Die Karte wechselt ohne Übergang.
Lauftext und Blinken ersetzen
marquee und blink sind veraltet. Derselbe Text in einem Absatz oder span bleibt an Ort und Stelle lesbar.
KorrekturvergleichSchritt 2 · HTML Vorher
<marquee>Neue Öffnungszeiten ab 1. März</marquee> <blink>Bitte beachten</blink>Nachher
<p class="hinweisband">Neue Öffnungszeiten ab 1. März</p> <strong>Bitte beachten</strong>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie den Hinweis, ohne ihm zu folgen. Der Text steht still und bleibt vollständig sichtbar.
Ton nicht von allein starten
autoplay entfernen und controls ergänzen. Wer den Ton hören möchte, startet ihn selbst; die Sprachausgabe bleibt verständlich.
KorrekturvergleichSchritt 3 · HTML Vorher
<audio src="/ton/atelier.wav" autoplay loop></audio>Nachher
<audio src="/ton/atelier.wav" controls aria-label="Atelierton"></audio>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite neu. Es bleibt still, bis Sie auf Abspielen drücken.