FluentUI: Bewegung

Zurück: Übersicht

Bewegung ist in dieser Bibliothek eine Zutat, keine Grundlage: verminderte Bewegung hat der Besucher einmal im Betriebssystem eingestellt, und jede Animation hält sich daran.

Status: [Live].

Diese Seite führt jeden bewegten Teil des Bausatzes an einer Stelle und beschreibt, was mit ihm geschieht, wenn ein Besucher weniger Bewegung eingestellt hat. Sie ist der Grund, warum die neun Barrierefreiheits-Seiten der einzelnen Bauteile das Thema nicht wiederholen: Bewegung ist eine Eigenschaft des Bausatzes, nicht eines Bauteils.

Keine. Die Zusage gilt für jede Fläche, auf der der Bausatz rendert, und verlangt vom Aufrufer nichts.

Verminderte Bewegung ist eine Einstellung, die der Besucher bereits getroffen hat – im Betriebssystem, einmal, für alle Anwendungen. Für einen Teil derer, die sie setzen, verursachen gleitende und wischende Bewegungen tatsächliche Übelkeit oder Schwindel. Sie zu übergehen ist deshalb keine ausgelassene Annehmlichkeit, sondern eine verworfene Willensäußerung.

Der Browser reicht sie als Medienabfrage prefers-reduced-motion: reduce durch. Der Bausatz wertet sie aus; der Aufrufer muss nichts abfragen und nichts weiterreichen.

Was bewegt wird und was nicht. Bewegt wird, was sich bewegt – Schublade, Dialog, Einblendmeldung, Schaltknauf, aufklappender Zweig. Ein Zustand – Zeiger, Auswahl, Fokus, Druck – wechselt seine Farbe sofort, ohne Übergang.

Das ist keine Lücke, sondern der Grund, warum dichte Tabellen sich gut bedienen lassen: wer den Zeiger über dreißig Zeilen zieht, will dreißig sofortige Antworten und nicht dreißig nachlaufende Blenden. In den beiden Referenzwerkbänken haben Listenzeile, Knopf und Kontrollkästchen keinen Übergang; insgesamt stehen dort 27 Übergänge in 154 Stylesheets und keine Keyframes, und diese 27 bewegen Deckkraft, Verschiebung und Höhe. Die einzige Bewegung in deren Datenraster ist ein Aufblitzen nach einer Wertänderung – Aufmerksamkeit, keine Rückmeldung auf den Zeiger.

Wer hier später einen fehlenden Übergang vermutet, findet in style.css an der Marke --wk-motion dieselbe Zählung noch einmal. Eine Entscheidung, die nur als Abwesenheit sichtbar ist, liest sich sonst beim nächsten Mal wieder als Versäumnis.

Warum alle bewegten Teile in einem Block stehen. Der Fehlerfall ist hier nicht eine falsche Regel, sondern eine vergessene – und eine vergessene Regel neben einer Animation ist unsichtbar, während eine fehlende Zeile in einer Liste, die Vollständigkeit behauptet, es nicht ist. Genau das ist vorher passiert: der Bausatz hatte vier bewegte Teile und berücksichtigte die Einstellung bei einem davon.

Entfällt – nichts einzurichten.

Zum Prüfen die Einstellung im Betriebssystem setzen (Windows: Einstellungen → Barrierefreiheit → Visuelle Effekte → Animationseffekte; macOS: Bedienungshilfen → Anzeige → Bewegung reduzieren) und eine Schublade oder einen Dialog öffnen. Beide erscheinen dann sofort an ihrer Endposition, statt hereinzufahren.

Beim Umschalter ist die Bewegung ausdrücklich entbehrlich: der Zustand, den sie anzeigt, wird zusätzlich durch Farbe und Endposition getragen, und beide kommen ohne den Weg dorthin an.

Entfällt – es gibt keine Option. Die Einstellung des Besuchers ist der einzige Schalter, und ein Anwendungsschalter daneben wäre eine zweite Wahrheit über dieselbe Frage.

Entfällt – die Zusage wirkt ohne Zutun des Aufrufers.

Acht der zehn Dauern sind Literale, zwei lesen die Marke. Der Tokensatz führt zwei Namen für Bewegung – --wk-motion und --wk-easing –, und beide erscheinen im Themenbauer unter der Gruppe Motion.

Gelesen werden sie von den beiden Schublade-Regeln der Gleitfassung. Die übrigen acht Dauern sind Literale; eine davon zu ändern ist eine Codeänderung und keine Einstellung. Das ist Absicht und kein Rückstand: die Dauern sind aufeinander abgestimmte Werte eines Bewegungsentwurfs und keine Vorliebe. Eine Marke für jede einzelne Dauer lüde dazu ein, sie einzeln zu verstellen.

Die Liste gilt nur für den Bausatz. Die Hausvorlage und einzelne Pakete bringen eigene Übergänge mit und berücksichtigen die Einstellung jeweils selbst; sie stehen nicht hier, weil diese Seite nicht behaupten soll, für fremden Code zu sprechen.

Betroffen ist WCAG 2.2 Erfolgskriterium 2.3.3 (Animation aus Interaktionen, Stufe AAA). Die Zusage geht damit über das hier sonst geltende Maß AA hinaus – sie kostet vier Zeilen und wird deshalb gegeben, nicht weil sie gefordert wäre.

Die Medienabfrage wird von allen aktuellen Browsern ausgewertet. Wo sie fehlt, bleibt es beim bisherigen Verhalten: die Bewegung läuft. Es gibt keinen Zustand, in dem etwas nicht erscheint.

Der Prüflauf fällt auch dann, wenn er nichts findet – ein Parser, der am Stylesheet zerbricht, meldete sonst ein grünes Ergebnis über eine Messung, die nicht stattgefunden hat.

• FluentUI: Design-Tokens – Design-Tokens; dort stehen --wk-motion und --wk-easing mit ihrer Herkunft
• Eingabefelder: Accessibility – Zustands-Kommunikation der Eingabefelder
• FluentUI: Basis-Widget-Katalog – Basis-Widget-Katalog, darunter Schublade, Dialog und Einblendmeldung