Pausieren, Stoppen, Ausblenden
Bewegte, blinkende, scrollende oder automatisch aktualisierte Inhalte, die länger als fünf Sekunden andauern, müssen vom Nutzer pausierbar, stoppbar oder ausblendbar sein. Das betrifft Karussells, Laufschriften, Nachrichten-Ticker, animierte Werbung und automatisch aktualisierende Feeds.
Was das Kriterium verlangt
Für alle Inhalte, die (a) sich bewegen, blinken, scrollen oder automatisch aktualisieren, (b) automatisch starten und (c) länger als fünf Sekunden parallel zu anderen Inhalten angezeigt werden, muss ein Mechanismus vorhanden sein, mit dem der Nutzer sie pausieren, stoppen oder ausblenden kann. Dasselbe gilt für automatisch aktualisierende Inhalte ohne Bewegung (Live-Nachrichtenfeeds, Anzeigetafeln, Chats).
Ausnahmen: Inhalte, bei denen die Bewegung wesentlich für die Aktivität ist (ein abgespieltes Video, ein Animations-Tutorial), sowie Inhalte, die als einzige Elemente auf dem Bildschirm erscheinen (ein Lade-Spinner vor dem Erscheinen des eigentlichen Inhalts).
Wie man es erfüllt
- Jedem Karussell, jeder Slideshow und jedem automatisch wechselnden Banner eine sichtbare Pause-/Play-Schaltfläche hinzufügen. Diese Schaltfläche sollte das erste fokussierbare Element des Karussell-Widgets sein.
- Karussells bei Hover und Tastaturfokus automatisch pausieren – der Nutzer muss sie jedoch weiterhin vollständig stoppen können.
- Bei Nachrichten-Tickern, Laufschriften und Aktienkursbändern eine Pause-Schaltfläche in derselben Zeile bereitstellen, mit einer Mindestgröße von 24 × 24 Pixel.
- Bei automatisch aktualisierenden Dashboards (Kibana, Grafana, Live-Sport) eine Auswahlmöglichkeit für das Aktualisierungsintervall einschließlich der Option „Nur manuell aktualisieren“ anbieten.
- Animierte GIFs mit Endlosschleife sollten durch
<video>-Elemente mit nativen Steuerelementen oder durch ein „Play-on-Click“-Muster ersetzt werden.
Häufige Fehler
- Hero-Karussells, die alle drei bis fünf Sekunden wechseln und keine Pause-Steuerung bieten – nach wie vor der häufigste 2.2.2-Fehler in Audits.
- Automatisch abspielende Video-Hintergründe ohne Steuerelemente, insbesondere auf Marketing-Seiten.
- Nachrichten-Ticker, die horizontal scrollen, ohne Pause-Schaltfläche.
- Animierte SVG-Illustrationen auf Landing Pages, die endlos loopen, ohne eine Möglichkeit zum Stoppen.
- Toast-Benachrichtigungen, die aus einem Live-Feed kontinuierlich gestapelt werden, ohne die Möglichkeit, sie stummzuschalten.
axe und Lighthouse können <marquee> und bestimmte prefers-reduced-motion-Verstöße erkennen, aber ein JavaScript-gesteuertes Karussell ohne Steuerelemente lässt sich damit nicht identifizieren. Eine manuelle Überprüfung ist erforderlich.
Warum es wichtig ist
Automatisch bewegte Inhalte gehören zu den behinderndsten Mustern im Web. Sie lenken die Aufmerksamkeit aller Nutzenden mit aufmerksamkeitsbezogenen Behinderungen ab (ADHS, bestimmte Angststörungen, Post-Kontusions-Syndrom), zwingen Screenreader-Nutzende dazu, ihre Position immer wieder zu verlieren, wenn DOM-Knoten aktualisiert werden, und machen das Lesen für sehschwache Nutzende, die Text langsam verfolgen, unmöglich. Eine Pause-Schaltfläche ist eine der kostengünstigsten und wirkungsvollsten Maßnahmen für Barrierefreiheit, die ein Marketing-Team umsetzen kann.