- Stufe
- A
- Seit
- WCAG 2.0
- Einträge
- 41 / 193
2.2.2 Pausieren, beenden, ausblenden
Alles, was sich von selbst bewegt, blinkt, scrollt oder aktualisiert, braucht ein Bedienelement, mit dem man es anhalten, beenden oder ausblenden kann.
/ Was es verlangt
Unter dieses Kriterium fallen Karussells, die per Timer weiterschalten, Newsticker, animierte Banner, Hintergrundvideos und Listen, die sich selbst aktualisieren. Bewegung am Rand des Blickfelds zieht die Aufmerksamkeit von dem Text ab, den jemand gerade lesen will. Für Menschen mit Aufmerksamkeitsstörungen oder kognitiven Beeinträchtigungen kann sie den Rest der Seite unbenutzbar machen, und eine Folie, die wechselt, bevor langsam Lesende oder Menschen mit Screenreader fertig sind, nimmt ihnen den Inhalt weg.
Für Inhalte, die sich bewegen, blinken oder scrollen, gilt die Regel, wenn sie automatisch starten, länger als fünf Sekunden andauern und neben anderem Inhalt gezeigt werden. Automatisch aktualisierte Inhalte haben keine Fünf-Sekunden-Frist. In beiden Fällen braucht es einen Mechanismus zum Anhalten, Beenden oder Ausblenden oder, bei Aktualisierungen, zum Steuern ihrer Häufigkeit. Bewegung, die für die Aktivität wesentlich ist, ist ausgenommen, und eine Ladeanimation, während niemand mit der Seite interagieren kann, darf als wesentlich gelten.
/ Woran Seiten scheitern
- Ein Karussell auf der Startseite schaltet per Timer weiter und bietet nur Pfeile für zurück und weiter, aber keine Pause-Schaltfläche.
- Ein Video im Kopfbereich läuft in Schleife hinter der Überschrift, ohne Bedienelement zum Anhalten.
- Ein Lauftext mit Nachrichten oder Preisen läuft ununterbrochen am oberen Seitenrand.
- Ein Live-Feed oder eine Ergebnistafel fügt per Timer neue Einträge ein und schiebt den Text, den jemand gerade liest, nach unten.
- Eine Pause-Schaltfläche ist vorhanden, erscheint aber nur bei Maus-Hover oder ist per Tastatur nicht erreichbar.
/ So prüfen Sie es selbst
- Laden Sie die Seite und tun Sie länger als fünf Sekunden nichts. Notieren Sie alles, was sich dann noch bewegt, blinkt, scrollt oder ändert.
- Suchen Sie bei jedem dieser Inhalte ein sichtbares Bedienelement zum Anhalten, Beenden oder Ausblenden in der Nähe und prüfen Sie, ob es einen Textnamen hat und nicht nur ein Icon.
- Erreichen Sie das Bedienelement mit Tab und betätigen Sie es mit Eingabe oder Leertaste. Die Bewegung muss stoppen und darf nicht wieder anlaufen, wenn der Fokus weiterwandert.
- Prüfen Sie, ob der angehaltene Inhalt weiter lesbar ist und der Rest der Seite während der Pause funktioniert.
/ So beheben Sie es
- Ergänzen Sie im Karussell ein echtes button-Element, das die automatische Wiedergabe aus- und einschaltet, mit einem Textnamen wie Folien anhalten, und setzen Sie es im DOM vor die Folien, damit Tastaturnutzende es zuerst erreichen.
- Oder entfernen Sie die automatische Wiedergabe. Ein Karussell, das sich nur auf Druck der Weiter-Schaltfläche bewegt, hat nichts zum Anhalten.
- Geben Sie Videos in Schleife das Attribut controls oder eine Pause-Schaltfläche, die pause() auf dem video-Element aufruft.
- Stoppen Sie CSS-Animationen mit animation-play-state: paused, sobald das Bedienelement betätigt wird, und stoppen Sie Lauftexte und Feeds, indem Sie deren Timer löschen.
- Lassen Sie dekorative Animationen innerhalb von fünf Sekunden enden: Setzen Sie animation-iteration-count auf eine endliche Zahl und halten Sie die gesamte Laufzeit unter dieser Grenze.
/ Was unser Scanner prüft
Unsere Prüfung carousel-no-pause betrachtet bis zu vier sichtbare Bereiche, die mit aria-roledescription="carousel" ausgezeichnet sind oder carousel oder slider im Klassennamen tragen. Sie lässt einen Bereich durch, der eine Schaltfläche enthält, deren Name oder Klasse Pause, Stopp oder Wiedergabe erwähnt, und meldet die übrigen, wenn darin etwas endlos animiert oder eine CSS-Transition länger als 0,3 Sekunden hat. Sie misst die Dauer der Bewegung nicht und betrachtet weder Lauftexte, Videos noch Feeds.
/ Wer es verletzt, nach unseren eigenen Messungen
Eine Seite je Stelle, automatisch im Wochenrhythmus gemessen. Behebungen seit dem letzten Durchlauf erscheinen beim nächsten, und jede Eintragsseite bietet ein Recht auf Gegendarstellung.
/ Fragen zu diesem Kriterium
Verstößt ein automatisch wechselndes Karussell gegen WCAG?
Es verstößt gegen 2.2.2, wenn es von selbst startet, sich länger als fünf Sekunden bewegt, neben anderem Inhalt steht und keine Möglichkeit bietet, es anzuhalten, zu beenden oder auszublenden. Eine Pause-Schaltfläche, die per Tastatur funktioniert, genügt zum Bestehen. Ein Karussell, das nur auf Wunsch der Person wechselt, fällt nicht unter das Kriterium.
Was ist die Fünf-Sekunden-Regel in WCAG 2.2.2?
Inhalte, die sich bewegen, blinken oder scrollen und automatisch starten, dürfen bis zu fünf Sekunden ohne Bedienelement laufen. Danach ist ein Mechanismus zum Anhalten, Beenden oder Ausblenden erforderlich. Die Frist gilt nicht für automatisch aktualisierte Informationen wie einen Live-Feed: Sie brauchen ein Bedienelement, egal wie kurz die einzelne Aktualisierung ist.
Ist eine animierte Ladeanzeige ein Verstoß?
In der Regel nicht. Das Kriterium gilt für Inhalte, die parallel zu anderem Inhalt gezeigt werden, und WCAG merkt an, dass eine Animation in einer Ladephase als wesentlich gelten kann, wenn währenddessen niemand mit der Seite interagieren kann. Eine Anzeige, die sich länger als fünf Sekunden neben bereits gelesenem Inhalt dreht, ist etwas anderes und braucht eine Möglichkeit zum Anhalten.