どちらも満たします。一時停止ボタンは、デザインの中心だった終わりのない映像を残せます。ヒーローの角のボタンと数行のスクリプトが必要で、利用者がボタンを見つけるまで、豆は全員の前で動き続けます。1回だけ再生する短い動画は作る手間がほとんどなく、誰も何かを探す必要がありませんが、デザイナーはループを手放します。映像は伝えたいことを4秒で伝え、写真として成り立つコマで終わる必要があります。オープニングの映像で足りるなら短い動画を、動く映像がブランドの一部なら一時停止ボタンを選びます。

ヒーローにポインターがある間や、中にフォーカスがある間に止める仕組みは、親切として残してもかまいませんが、2.2.2が求める手段にはなりません。達成基準の解説書は、フォーカスが動く内容にある間しか続かない一時停止を認めていません。ホバーしたときだけ現れる一時停止ボタンも同じです。スマートフォンにはホバーするポインターがなく、opacity: 0 で隠すとキーボードは見えないボタンに届き、visibility: hidden で隠すとキーボードはそもそも届きません。

ボタンには、ほかのアイコンボタンと同じ条件がそろっている必要があります。名前、後ろにあるどの色に対しても3:1のコントラストがあるアイコン、24×24ピクセル以上の大きさ（上のボタンは44ピクセル）、どのコマの上でも見えるフォーカス表示（上の白い枠は、内側と外側に暗い帯があります）、一緒に切り替わるアイコンと名前です。押すと名前が変わるボタンは、スクリーンリーダーによっては新しい名前を読み直さないため、利用者が使うものでも確認します。記号を知らない人のために、アイコンの横に「一時停止」と言葉を添えるサイトもあります。

利用者が選んだ状態は保ちます。sessionStorage などに訪問中保存し、動画を再生する前に読むことで、再読み込みしたときや同じヒーローのある次のページで、また動き出さないようにします。電池を節約するために、ヒーローが画面の外に出たら動画を止めるスクリプトはかまいませんが、利用者が止めた動画を、画面に戻ったときに再生してはいけません。

HTML標準の controls でも一時停止できますが、ヒーローの上に再生バーが表示され、再生位置のバーなど、ヒーローには要らない操作も付くため、多くのデザインでは上のような1つのボタンを使います。

動きを減らす設定は尊重する価値があります。一時停止ボタンの方法では、その設定のときに動画を止めたままにしています。短い動画でも、その設定のときは autoplay を付けないようにできます。ただし、それだけでは直りません。動きで気が散る人がその設定を知っているとは限らず、2.2.2が求めているのはページ上の仕組みです。操作をきっかけに始まるアニメーションにこの設定が求めることは、動きを減らす設定を無視するアニメーションで扱います。

短い動画の5秒は、ファイルを読み込み終えたときからではなく、動画が動き始めたときから数えます。コンテンツ管理システムで編集者がヒーローの動画を差し替えられる場合は、そこで長さを確認し、ボタンのないまま長い動画が公開されないようにします。

ほかの内容と並んで自動で動く映像には、どこでも同じ問題が起きます。どれも、同じ2つの方法で直せます。

• ページの下のほうのセクションでループする動画。たとえば、回転し続ける商品の映像。
• 動画の代わりに置かれ、終わりなくループするアニメーションGIF、WebP、Lottie。
• Vimeoの背景用オプションや、YouTubeのコントロールを非表示にして、自動再生とループを設定した埋め込み動画。

映像ではない流れる文字やカルーセルなどは、一時停止できない、流れる文字、カルーセル、アニメーションで扱います。脈打つボタンや回るアイコンは、ふつうは自然に止まるようにする別の方法で直します：止まらずに動き続けるボタンやバッジのアニメーション。