Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten
Geben Sie Nutzenden Kontrolle über Karussells und Videos.
Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Nutzerinnen und Nutzern Kontrolle geben
Wenn sich Inhalte selbstständig bewegen, brauchen Nutzerinnen und Nutzer eine Möglichkeit, dies zu beenden. WCAG nennt dies für automatisch bewegte Inhalte pause, stop, or hide. ⏸️
Was als automatisch bewegt gilt
Denken Sie an Carousels, automatisch weiterlaufende Diashows, Laufbänder und Endlosvideos im Hintergrund. Alles, was sich ohne Nutzeraktion animiert, fällt darunter.
Die Fünf-Sekunden-Regel
Das Kriterium bezieht sich auf Bewegungen, die länger als fünf Sekunden dauern und parallel zu anderen Inhalten laufen. Eine kurze Einführungsanimation ist davon ausgenommen.
Warum das wichtig ist
Bewegte Inhalte lenken ab und können für Nutzerinnen und Nutzer mit kognitiven oder bewegungsbedingten Empfindlichkeiten unlesbar sein. Kontrolle gibt die Seite zurück.
Eine Pausensteuerung anbieten
Die einfachste Lösung ist eine echte Pause-Schaltfläche. Lassen Sie Nutzerinnen und Nutzer ein Carousel anhalten, damit sie einen Slide in Ruhe zu Ende lesen können.
<button aria-label="Pause slideshow">Pause</button>Stopp ist stärker als Pause
Eine Pause kann fortgesetzt werden; Stopp beendet die Bewegung endgültig. Beides erfüllt die Regel, solange die Nutzerinnen und Nutzer tatsächlich die Kontrolle haben.
Ausblenden ist ebenfalls möglich
Manchmal ist es am besten, wenn Nutzerinnen und Nutzer das bewegte Element vollständig ausblenden können. Eine Schaltfläche zum Schließen eines Laufbands beseitigt die Ablenkung direkt.
Bei Hover und Fokus pausieren
Ein Carousel sollte ebenfalls pausieren, wenn die Nutzerin oder der Nutzer darüber fährt oder mit der Tab-Taste hineinnavigiert, damit Lesen und Interaktion nicht mit dem automatischen Wechsel konkurrieren.
Die Steuerung erreichbar machen
Die Pause-Schaltfläche selbst muss per Tastatur erreichbar sein und eine klare Beschriftung haben. Eine Steuerung, die niemand findet, zählt nicht.
Mit reduzierter Bewegung kombinieren
Am besten starten Sie für Menschen mit reduzierter Bewegung keine automatische Wiedergabe. Kombinieren Sie die Prüfung der Präferenz mit einer sichtbaren Pausensteuerung.
@media (prefers-reduced-motion: reduce) {
.carousel { animation-play-state: paused; }
}Auf automatisches Weiterschalten verzichten
Ehrlich gesagt funktionieren viele Carousels besser ganz ohne automatisches Weiterschalten. Lassen Sie Nutzerinnen und Nutzer in ihrem eigenen Tempo weiterklicken, und das Problem verschwindet.
Kurztest
Was verlangt die Regel zu Pause, Stopp oder Ausblenden?
Zusammenfassung
Automatisch bewegte Inhalte brauchen eine von den Nutzenden kontrollierte Möglichkeit zum Pausieren, Stoppen oder Ausblenden. Machen Sie sie per Tastatur erreichbar und verzichten Sie bei reduzierter Bewegung auf Auto-Play. ✅
Häufig gestellte Fragen
Ist die Lektion „Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten“ kostenlos?
Ja — der vollständige Text von „Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten“?
Geben Sie Nutzenden Kontrolle über Karussells und Videos. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- prefers-reduced-motion in CSS und JS
- Vestibuläre Erkrankungen und Parallax-Risiken
- Der Drei-Blitze-Schwellenwert für Krampfanfälle
- Pause, Stoppen, Ausblenden bei automatisch bewegten Inhalten