{
 "$schema": "../../schema.json",
 "schema": "fundus/1",
 "id": "bewegung-pausieren-schalter",
 "name": "Schalter „Bewegung reduzieren“ mit Pause-Knöpfen",
 "name_en": "On-page reduce-motion switch with pause controls (WCAG 2.2.2)",
 "kurz": "Ein gestalteter Schalter „Bewegung reduzieren“ in der Kopfleiste hält Laufband, Bewegtbild und Karussell sofort an und merkt sich die Wahl; jedes Element hat zusätzlich seinen eigenen Pause-Knopf.",
 "kategorie": "Zugang & Robustheit",
 "kategorie_slug": "zugang",
 "kategorie_nr": 17,
 "bau_chat": "E",
 "prioritaet": "E",
 "trendstatus": "aufsteigend",
 "belegstatus": "quellenbelegt",
 "website_belege": 0,
 "stimmung": [
  "ruhig",
  "präzise"
 ],
 "stimmung_roh": [
  "rücksichtsvoll",
  "sachlich",
  "klar"
 ],
 "technik": [
  "css",
  "vanilla-js"
 ],
 "technik_gruppen": [
  "css",
  "js"
 ],
 "leistungskosten": "niedrig",
 "steckbrief": {
  "beschreibung": "1) Ein gestalteter Schalter „Bewegung reduzieren“ sitzt fest in der Kopfleiste. Er übernimmt beim ersten Besuch die Systemeinstellung prefers-reduced-motion und merkt sich danach die Wahl der Besucherin per localStorage. 2) Jede Bewegung, die von selbst startet und länger als fünf Sekunden läuft, hat zusätzlich einen eigenen Pause-Knopf direkt am Element: Laufband, Hintergrund-Loop oder Video, Karussell mit Autoplay. 3) Alles schaltet sofort und sichtbar: Das Laufband bleibt stehen und zeigt seinen Text vollständig, der Loop friert auf einem ruhigen Bild ein, das Karussell bleibt bedienbar, wechselt aber nicht mehr von selbst.",
  "warum_es_wirkt": "Die Systemeinstellung kennen viele nicht oder wollen sie nicht für alle Programme ändern. Ein sichtbarer Schalter auf der Seite gibt die Entscheidung dorthin, wo die Bewegung stört. Pause-Knöpfe am Element erfüllen WCAG 2.2.2 auch für Menschen, die nur ein einzelnes Laufband anhalten wollen. Gut gestaltet wirkt das nicht wie ein Pflichtteil, sondern wie Haltung.",
  "wann_einsetzen": "Auf jeder Seite mit Laufband, Hintergrundvideo, Loop-Animation oder Karussell mit Autoplay. Besonders bei öffentlichen Häusern, Kultur, Bildung, Verwaltung, Gesundheit und überall, wo das BFSG greifen kann (vom Kunden prüfen lassen).",
  "wann_nicht": "Wenn die Seite gar keine selbst startende Bewegung hat: Dann genügt prefers-reduced-motion, ein Schalter ohne Wirkung verwirrt. Nicht als Ersatz für ein ruhiges Grundkonzept: Bewegung, die stört, wird besser gar nicht erst gebaut.",
  "varianten": [
   "Globaler Schalter in der Kopfleiste (role=\"switch\") plus Pause-Knöpfe an jedem bewegten Element",
   "Nur Pause-Knöpfe am Element, globale Steuerung über prefers-reduced-motion",
   "Schalter im Barrierefreiheits-Menü zusammen mit Kontrast und Schriftgröße",
   "Karussell nach APG: Start/Stopp-Knopf als erstes Element, Pause bei Hover und Fokus"
  ],
  "umsetzung": "Zustand an einer Stelle: <html data-bewegung=\"ruhig|voll\">. Ein Inline-Skript im <head> liest die gespeicherte Wahl (try { localStorage.getItem('…') } catch {}) und fällt sonst auf matchMedia('(prefers-reduced-motion: reduce)') zurück. So läuft nichts erst an und stoppt dann. Schalter: <button role=\"switch\" aria-checked=\"false\">Bewegung reduzieren</button>; ein Klick setzt das Attribut, speichert (ebenfalls in try/catch) und meldet die Wahl über role=\"status\". Jedes bewegte Element hört auf den Zustand und hat zusätzlich einen eigenen Knopf mit wechselndem Namen („Laufband anhalten“ / „Laufband abspielen“). Laufband: Inhalt einmal im DOM, Kopie aria-hidden; angehalten Animation aus und Text umbrechen. Video: video.pause(), Poster bleibt; im Zustand ruhig autoplay gar nicht erst starten. Den Zustand des Video-Knopfs aus video.paused und den Ereignissen play und pause ablesen, nicht aus der CSS-Pseudoklasse :paused: Chrome und Edge kennen sie laut MDN und Web Features Explorer noch nicht (Stand 02.11.2026), auch wenn der web.dev-Digest August 2026 sie als Baseline führt. Wo es sie gibt, darf :paused nur die Optik ergänzen, etwa das Symbol. Canvas oder Lottie: Schleife anhalten und an derselben Stelle fortsetzen. Karussell nach APG: Start/Stopp-Knopf vor den Folien, Timer stoppen, Wechsel ohne Gleiten, aria-live von off auf polite. Auf echten Seiten sollte der Schalter auf jeder Seite an derselben Stelle stehen, damit die Wahl auffindbar bleibt.",
  "mobil": "Schalter bleibt in der Kopfleiste erreichbar, mindestens 44 px hoch. Pause-Knöpfe als Daumenziel am Element, nicht nur beim Hover sichtbar.",
  "reduzierte_bewegung": "prefers-reduced-motion setzt den Startwert „ruhig“. Der Schalter kann ihn in beide Richtungen überschreiben, die Wahl gilt beim nächsten Besuch wieder.",
  "barrierefreiheit": "WCAG 2.2.2 Pause, Stop, Hide (A): Pause-Knopf für jede selbst startende Bewegung über 5 s, Fortsetzen an derselben Stelle (Technik G4), Steuerung auf der Seite (G186). WCAG 2.3.3 Animation from Interactions (AAA) wird mit dem globalen Schalter gleich mit bedient. 4.1.2 Name, Role, Value: Schalter als role=\"switch\" mit aria-checked, Pause-Knöpfe mit wechselndem sichtbarem Namen statt nur Symbol. 2.4.7 Focus Visible: alle Knöpfe mit sichtbarem Fokus. 2.5.8 Target Size (AA): Ziele mindestens 24 × 24 px, hier 44 px. 1.4.11 Non-text Contrast: Schalterzustand mit 3:1 und nicht nur über Farbe (Knopf wandert, Text „an/aus“). 4.1.3 Status Messages: Bestätigung per role=\"status\". Karussell nach APG: Start/Stopp vor den Folien, aria-live off beim Laufen, polite im Stand, Pause bei Hover und Fokus."
 },
 "messwerte": {
  "easing": "cubic-bezier(0.215, 0.61, 0.355, 1) für Schalter und Folienwechsel (Rezept kultur-programm-haltung)",
  "dauer_ms": "Schalter 200, Folienwechsel 350, Statusmeldung 4000 sichtbar",
  "stagger_ms": "",
  "distanz": "Laufband 40 px/s; Karussell-Autoplay 6000 ms je Folie",
  "sonstiges": "Grenze aus WCAG 2.2.2: Bewegung über 5 s braucht Pause. Autoplay-Takt und Laufband-Tempo sind eigene Festlegung.",
  "herkunft": "eigene Festlegung",
  "quelle": "https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide"
 },
 "kurve": {
  "bezier": [
   0.215,
   0.61,
   0.355,
   1.0
  ],
  "css": "cubic-bezier(0.215, 0.61, 0.355, 1)",
  "name": "eigene Kurve",
  "dauer_ms": 200
 },
 "gesehen_bei": [
  {
   "seite": "Animal Crossing (Nintendo)",
   "url": "https://craftcms.com/blog/designing-for-reduced-motion",
   "auszeichnung": "",
   "beobachtung": "Laut Craft-CMS-Artikel (Lupe Camacho, 05.04.2023) hat die Animal-Crossing-Website einen Knopf in der Kopfleiste, der die Bewegung der Seite an- und abschaltet. Mit Bewegung dreht sich der Hintergrund und Figuren springen ins Bild, ohne Bewegung wechselt der Hintergrund ohne Drehung und die Figuren blenden nur ein. Nicht selbst geprüft.",
   "art": "artikel"
  },
  {
   "seite": "W3C WAI-ARIA APG: Auto-Rotating Image Carousel",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/",
   "auszeichnung": "",
   "beobachtung": "Start/Stopp-Knopf steht als erstes Element in der Tab-Reihenfolge, Name wechselt zwischen „Stop Automatic Slide Show“ und „Start Automatic Slide Show“. Während der Rotation aria-live=\"off\", angehalten aria-live=\"polite\". Hover und Fokus im Karussell pausieren, außer die Nutzerin hat die Rotation ausdrücklich gestartet.",
   "art": "demo"
  },
  {
   "seite": "W3C: Understanding SC 2.2.2 Pause, Stop, Hide",
   "url": "https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide",
   "auszeichnung": "",
   "beobachtung": "Stufe A. Bewegung, die automatisch startet, länger als fünf Sekunden läuft und neben anderem Inhalt steht, braucht einen Weg zum Pausieren, Stoppen oder Ausblenden. Ausreichende Techniken u. a. G4 (pausieren und an derselben Stelle fortsetzen), G186 (Steuerelement auf der Seite stoppt Bewegung), SCR33 (Skript-Scrollen mit Pause).",
   "art": "artikel"
  },
  {
   "seite": "Hidde de Vries: Meeting 2.2.2 with prefers-reduced-motion",
   "url": "https://hidde.blog/meeting-2-22-pause-stop-hide-with-prefers-reduced-motion/",
   "auszeichnung": "",
   "beobachtung": "Abwägung vom 03.12.2021: prefers-reduced-motion kann für die meisten Fälle als Mechanismus zählen, hilft aber nur, wenn Menschen die Systemeinstellung finden. Ausnahme: Inhalte wie ein Börsenticker, deren Stillstand auch den Inhalt verbirgt.",
   "art": "artikel"
  }
 ],
 "tutorials": [
  {
   "titel": "W3C: Understanding SC 2.2.2 Pause, Stop, Hide",
   "url": "https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide"
  },
  {
   "titel": "W3C APG: Auto-Rotating Image Carousel Example",
   "url": "https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/"
  },
  {
   "titel": "Craft CMS: Designing for reduced motion",
   "url": "https://craftcms.com/blog/designing-for-reduced-motion"
  }
 ],
 "kombinierbar_mit": [
  "marquee-laufband",
  "css-native-karussell",
  "cinematic-video-hero",
  "toggle-switch",
  "logo-wand-social-proof",
  "token-swiss-knackig"
 ],
 "urls": {
  "detail": "https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/",
  "meta": "https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/meta.json",
  "demo": "https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo"
 },
 "herkunft": {
  "quelldateien": [
   "DEF-Recherche 01.11.2026"
  ],
  "pruefnotizen": [
   "Recherche-Tabelle E: Schalter zusätzlich zu prefers-reduced-motion, Pause für Laufbänder, Videos, Karussells (WCAG 2.2.2).",
   "Animal-Crossing-Beleg nur aus zweiter Hand (Craft-CMS-Artikel); eine selbst geprüfte Produktionsseite mit Schalter fehlt noch.",
   "WCAG-Text und APG-Beispiel am 01.11.2026 per WebFetch gelesen.",
   "Korrektur 02.11.2026: Satz zu :paused in umsetzung (Stand belegt mit MDN und Web Features Explorer media-pseudos; widersprüchliche Angabe im web.dev-Digest August 2026 genannt). Demo hat kein Video, unverändert."
  ]
 },
 "bau": {
  "status": "fertig",
  "kurz": "Ein gestalteter Schalter „Bewegung reduzieren“ in der Kopfleiste hält Laufband, Bewegtbild und Karussell sofort an und merkt sich die Wahl; jedes Element hat zusätzlich seinen eigenen Pause-Knopf.",
  "demo": true,
  "abhaengigkeiten": [],
  "werte": {
   "easing": "cubic-bezier(0.215, 0.61, 0.355, 1) (easeOutCubic, Rezept kultur-programm-haltung)",
   "dauer_ms": "Schalter-Knauf und Hover 200 · Folienwechsel 350 · Statusmeldung 4000 sichtbar · Vorführungszeiger 700",
   "zustand": "<html data-bewegung=\"ruhig|voll\" data-quelle=\"gespeichert|system\">, gesetzt per Inline-Skript im <head> vor dem ersten Bild",
   "speicher": "localStorage-Schlüssel stiftsspeicher.bewegung = ruhig|voll; Lesen, Schreiben und Löschen jeweils in try/catch; ohne Speicher gilt die Wahl nur für die Seite",
   "vorrang": "gespeicherte Wahl > prefers-reduced-motion; „Wahl vergessen“ löscht den Schlüssel und kehrt zur Systemeinstellung zurück",
   "schalter": "<button role=\"switch\" aria-checked>, Bahn 40 × 22 px, Knauf 15 px wandert 18 px, Zustand zusätzlich als Text „An/Aus“; Ziel 44 px hoch",
   "laufband": "CSS-Animation translate, Tempo 40 px/s (Dauer = Breite / 40), Kopie aria-hidden; angehalten: Animation aus, Text bricht um und ist vollständig lesbar",
   "bewegtbild": "Canvas-Schleife 7 s (steht für Video/Lottie), requestAnimationFrame; Pause friert an derselben Stelle ein und setzt dort fort (G4); Marke „Standbild“",
   "karussell": "Autoplay 6000 ms je Schritt (Vorführung 2400), Taktlinie 2 px; aria-live off beim Laufen, polite im Stand; Pause bei Hover und Fokus, außer per Knopf gestartet (APG); Folien außerhalb inert",
   "pause_knopf": "sichtbarer Name wechselt: „… anhalten“ / „… abspielen“ bzw. „Wechsel starten“, Symbol nur zusätzlich; 44 px hoch",
   "meldung": "role=\"status\", Text bestätigt Wahl und Speichern"
  },
  "ausloeser": "klick",
  "touch": "Identisch per Tippen. Alle Knöpfe 44 px hoch. Unter 560 px bricht die Kopfleiste um (Marke oben, Schalter und Tickets darunter), der Laufband-Knopf zeigt nur das Symbol, sein Name „Laufband anhalten“ bleibt für Screenreader im Text. Karussell zeigt eine Karte, zwei ab 560 px.",
  "reduziert": "prefers-reduced-motion setzt den Startzustand „ruhig“: Laufband steht als umbrochene Liste, Bewegtbild zeigt ein Standbild, Karussell wechselt nicht von selbst und ohne Gleiten. Zusätzlich entfallen alle kleinen UI-Übergänge. Der Schalter kann das auf Wunsch überstimmen; die Vorführung wirft unter reduzierter Bewegung nichts an und blättert nur von Hand.",
  "korrekturen": {
   "umsetzung": "Zustand an einer Stelle: <html data-bewegung=\"ruhig|voll\">. Ein Inline-Skript im <head> liest die gespeicherte Wahl (try { localStorage.getItem('…') } catch {}) und fällt sonst auf matchMedia('(prefers-reduced-motion: reduce)') zurück. So läuft nichts erst an und stoppt dann. Schalter: <button role=\"switch\" aria-checked=\"false\">Bewegung reduzieren</button>; ein Klick setzt das Attribut, speichert (ebenfalls in try/catch) und meldet die Wahl über role=\"status\". Jedes bewegte Element hört auf den Zustand und hat zusätzlich einen eigenen Knopf mit wechselndem Namen („Laufband anhalten“ / „Laufband abspielen“). Laufband: Inhalt einmal im DOM, Kopie aria-hidden; angehalten Animation aus und Text umbrechen. Video: video.pause(), Poster bleibt; im Zustand ruhig autoplay gar nicht erst starten. Den Zustand des Video-Knopfs aus video.paused und den Ereignissen play und pause ablesen, nicht aus der CSS-Pseudoklasse :paused: Chrome und Edge kennen sie laut MDN und Web Features Explorer noch nicht (Stand 02.11.2026), auch wenn der web.dev-Digest August 2026 sie als Baseline führt. Wo es sie gibt, darf :paused nur die Optik ergänzen, etwa das Symbol. Canvas oder Lottie: Schleife anhalten und an derselben Stelle fortsetzen. Karussell nach APG: Start/Stopp-Knopf vor den Folien, Timer stoppen, Wechsel ohne Gleiten, aria-live von off auf polite. Auf echten Seiten sollte der Schalter auf jeder Seite an derselben Stelle stehen, damit die Wahl auffindbar bleibt."
  },
  "geprueft": "02.11.2026",
  "notiz": "Welt: Rezept kultur-programm-haltung, erfundenes Haus „Stiftsspeicher Quedlinburg“ für Druckgrafik. Schibsted Grotesk 850–900 für Marke, Titel und Daten, Atkinson Hyperlegible Next für Text, IBM Plex Mono für Laufband, Daten und Knöpfe. Schwarz #0b0b0b auf Off-White #efede9, Spartenfarben Kunst #2a7243, Musik #b23a14 (beide gegenüber dem Rezept leicht abgedunkelt, damit sie auch als Text auf Off-White 4,5:1 schaffen), Vermittlung #3d5f9a, Film #b0186b, immer mit Text-Label. Bewegtbild ist eine eigene Canvas-Zeichnung (Druckwalze rollt Grün über Holzmaserung), weil es keine Videodateien gibt. Die Vorführung legt mit einem gedachten Zeiger den Schalter um, startet nur das Bewegtbild neu und schaltet zurück; dabei wird nichts gespeichert. Tab-Reihenfolge: Marke, Navigation, Schalter, Tickets, Laufband-Pause, Bewegtbild-Pause, Wechsel-Pause, Zurück, Weiter, sichtbare Karten, Wahl vergessen. Referenzen: w3.org (WCAG 2.2.2, APG-Karussell), craftcms.com, hidde.blog. AD-Review 02.11.2026: Note 4. Nachgebessert: Karussell-Steuerung bricht unter 380 px um (vorher 37 px Querscrollen bei 320 px, WCAG 1.4.10), Kopfleiste und Navigation brechen bei erhöhten Textabständen um (vorher 14 px Querscrollen bei 1280 px, WCAG 1.4.12), randlose Knöpfe haben im Kontrastmodus eine Kante. Zugang 02.11.2026: Preis-Links der Programmkarten mit aria-label statt verstecktem Zusatztext (der unsichtbare Text ragte bei 320 px aus der Karte). Offen: laufendes Band hat bei 320 px einzelne Einträge breiter als der Viewport; angehalten bricht es um (so gewollt). Korrektur 02.11.2026: Satz zu :paused in korrekturen.umsetzung (Stand belegt mit MDN und Web Features Explorer media-pseudos: Chrome/Edge ohne; die Baseline-Angabe im web.dev-Digest August 2026 widerspricht diesen Daten). Demo hat kein Video, unverändert."
 }
}