moving-content-pausable

Inhalte, die sich von selbst bewegen, sollten sich pausieren, stoppen oder ausblenden lassen

manualWCAG 2.2.2 (A)Konfidenz: lowSchweregrad: moderateoperable

Fragt zu Elementen, die beim Laden der Seite länger als fünf Sekunden oder endlos animiert werden, nach, ob sich die Bewegung pausieren, stoppen oder ausblenden lässt.

Anwendbarkeit. Elemente mit einer Animation, die läuft, wenn der Scan beginnt, eine CSS-Animation, ein CSS-Übergang oder eine von einem Skript gestartete, auf einer zeitbasierten Zeitleiste (nicht scrollgesteuert), die gerendert werden und deren Animation ab ihrem Start (ihre Verzögerung und jede Wiederholung) länger als fünf Sekunden dauert oder nie endet. Eine solche Bewegung hat begonnen, ohne dass die Nutzenden sie angefordert haben. Ohne getAnimations eines Browsers (jsdom) ist nichts anwendbar.

Erwartung. WCAG 2.2.2 verlangt, dass sich bewegende, blinkende oder scrollende Inhalte, die automatisch starten, länger als fünf Sekunden dauern und neben anderen Inhalten angezeigt werden, pausiert, gestoppt oder ausgeblendet werden können, es sei denn, die Bewegung ist wesentlich. Ob ein Bedienelement das leistet und ob die Bewegung wesentlich ist, prüft eine Person; daher wird zu jedem Element einmal nachgefragt (cantTell), wie viele Animationen es auch ausführt.

Was ein Befund meldet.

reasonCode: MOVING_CONTENT_LOOPS für eine Animation, die nie endet, MOVING_CONTENT_OVER_5S für eine, die nach mehr als fünf Sekunden endet.
animations: die Animationen des Elements, bis zu fünf, jeweils mit kind (css-animation, css-transition oder script), name (der Name der Animation oder die übergehende Eigenschaft, '', wenn es keinen gibt) und endTime, in Millisekunden ab ihrem Start, null, wenn sie nie endet.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

can't tell

<style>@keyframes slide { to { transform: translateX(40px) } }</style>
<p style="animation: slide 2s linear infinite">Breaking news</p>

Der Absatz bewegt sich beim Laden der Seite endlos von selbst; eine Person prüft, ob ein Bedienelement ihn pausiert, stoppt oder ausblendet.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

`MOVING_CONTENT_LOOPS`

Laden Sie die Seite und beobachten Sie das im Bericht genannte Element; seine Animation startet von selbst und endet nie.
Suchen Sie nach einer Möglichkeit, ihn anzuhalten, zu stoppen oder auszublenden. Sie liegt oft neben dem Inhalt, etwa eine Pause-Schaltfläche an einer Diashow, kann aber überall auf der Seite sein, etwa eine Einstellung, die Animationen stoppt. Probieren Sie sie mit der Maus und mit der Tastatur aus (mit Tab dorthin springen, Eingabetaste oder die Leertaste drücken).
Prüfen Sie, ob die Bewegung tatsächlich stoppt oder der Inhalt ausgeblendet wird und so bleibt.
Gibt es kein Bedienelement, entscheiden Sie, ob die Bewegung wesentlich ist (ihr Entfernen würde die Bedeutung ändern) oder ob es eine allein angezeigte Ladeanzeige ist.

Bestanden. Ein mit der Tastatur bedienbares Bedienelement hält die Bewegung an, stoppt sie oder blendet sie aus, wo auch immer es auf der Seite liegt, oder die Bewegung ist wesentlich.

Nicht bestanden. Der Inhalt bewegt sich weiter und nichts auf der Seite, das sich mit der Tastatur bedienen lässt, hält ihn an, stoppt ihn oder blendet ihn aus; das verstößt gegen WCAG 2.2.2.

`MOVING_CONTENT_OVER_5S`

Laden Sie die Seite und beobachten Sie das im Bericht genannte Element; seine Animation startet von selbst und läuft länger als fünf Sekunden.
Suchen Sie nach einer Möglichkeit, ihn anzuhalten, zu stoppen oder auszublenden. Sie liegt oft neben dem Inhalt, etwa eine Pause-Schaltfläche an einer Diashow, kann aber überall auf der Seite sein, etwa eine Einstellung, die Animationen stoppt. Probieren Sie sie mit der Maus und mit der Tastatur aus (mit Tab dorthin springen, Eingabetaste oder die Leertaste drücken).
Prüfen Sie, ob die Bewegung tatsächlich stoppt oder der Inhalt ausgeblendet wird und so bleibt.
Gibt es kein Bedienelement, entscheiden Sie, ob die Bewegung wesentlich ist (ihr Entfernen würde die Bedeutung ändern) oder ob es eine allein angezeigte Ladeanzeige ist.

Bestanden. Ein mit der Tastatur bedienbares Bedienelement hält die Bewegung an, stoppt sie oder blendet sie aus, wo auch immer es auf der Seite liegt, oder die Bewegung ist wesentlich.

Nicht bestanden. Der Inhalt bewegt sich weiter und nichts auf der Seite, das sich mit der Tastatur bedienen lässt, hält ihn an, stoppt ihn oder blendet ihn aus; das verstößt gegen WCAG 2.2.2.

Quellcode ansehen