moving-content-pausable
自動で動くコンテンツは、一時停止、停止、または非表示にできることを推奨します
ページの読み込み時に、5秒を超えて、または終わりなくアニメーションしている要素について、その動きを一時停止、停止、または非表示にできるかどうかの確認を求めます。
適用範囲:スキャンの開始時にアニメーション(CSSアニメーション、CSSトランジション、またはスクリプトが開始したもの)が実行中で、それが時間ベースのタイムライン上にあり(スクロール駆動ではない)、要素がレンダリングされていて、アニメーションが開始から5秒を超えて続く(遅延とすべての反復を含む)か終わらない要素です。そうした動きは、ユーザーが求めることなく始まっています。ブラウザーのgetAnimationsがない場合(jsdom)は、適用対象はありません。
期待される結果:WCAG 2.2.2は、自動的に開始し、5秒を超えて続き、ほかのコンテンツと並べて表示される、動き、点滅、スクロールするコンテンツについて、一時停止、停止、または非表示にできることを求めています。ただし、その動きが必要不可欠な場合は除きます。コントロールがそれを実現しているか、動きが必要不可欠かは人が確認することなので、要素がいくつのアニメーションを実行していても、要素ごとに1回確認を求めます(cantTell)。
検出結果が報告する内容:
reasonCode:終わらないアニメーションではMOVING_CONTENT_LOOPS、5秒を超えてから終わるアニメーションではMOVING_CONTENT_OVER_5Sです。animations:要素のアニメーションで、最大5つです。それぞれkind(css-animation、css-transition、script)、name(アニメーション名またはトランジションするプロパティで、ない場合は'')、endTime(開始からのミリ秒数で、終わらない場合はnull)を持ちます。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<style>@keyframes slide { to { transform: translateX(40px) } }</style><p style="animation: slide 2s linear infinite">Breaking news</p>
段落はページの読み込み時から自動で終わりなく動いています。コントロールでそれを一時停止、停止、または非表示にできるかを、人が確認します。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
MOVING_CONTENT_LOOPS
- ページを読み込み、レポートに示された要素を観察してください。そのアニメーションは自動で始まり、止まりません。
- 一時停止、停止、または非表示にする方法を探してください。スライドショーの一時停止ボタンのようにコンテンツの隣にあることが多いですが、アニメーションを止める設定のように、ページのどこにあってもかまいません。マウスとキーボード(Tabキーで移動し、EnterまたはSpaceを押す)で試してください。
- 動きが実際に止まるか、コンテンツが隠され、その状態が維持されるか確認してください。
- コントロールがない場合は、その動きが必須である(取り除くと意味が変わる)か、単独で表示される読み込みインジケーターであるかを判断してください。
満たす場合:キーボードで使えるコントロールが、ページのどこにあっても、動きを一時停止、停止、または非表示にできるか、その動きは必須です。
満たさない場合:コンテンツが動き続け、ページ上にキーボードで使えてそれを一時停止、停止、または非表示にできるものがないため、WCAG 2.2.2を満たしません。
MOVING_CONTENT_OVER_5S
- ページを読み込み、レポートに示された要素を観察してください。そのアニメーションは自動で始まり、5秒を超えて続きます。
- 一時停止、停止、または非表示にする方法を探してください。スライドショーの一時停止ボタンのようにコンテンツの隣にあることが多いですが、アニメーションを止める設定のように、ページのどこにあってもかまいません。マウスとキーボード(Tabキーで移動し、EnterまたはSpaceを押す)で試してください。
- 動きが実際に止まるか、コンテンツが隠され、その状態が維持されるか確認してください。
- コントロールがない場合は、その動きが必須である(取り除くと意味が変わる)か、単独で表示される読み込みインジケーターであるかを判断してください。
満たす場合:キーボードで使えるコントロールが、ページのどこにあっても、動きを一時停止、停止、または非表示にできるか、その動きは必須です。
満たさない場合:コンテンツが動き続け、ページ上にキーボードで使えてそれを一時停止、停止、または非表示にできるものがないため、WCAG 2.2.2を満たしません。