自動移動コンテンツを一時停止、停止、非表示にする

コンテンツが自動的に動くなら、ユーザーには止める方法が必要です。WCAG では、自動的に動くコンテンツに対して一時停止、停止、非表示を提供することを求めています。⏸️

カルーセル、自動で進むスライドショー、スクロールするティッカー、ループする背景動画などを考えてみてください。ユーザーの操作なしにアニメーションするものは、すべて対象になります。

この基準の対象は、他のコンテンツと並行して5秒を超えて動き続けるものです。短い導入アニメーションは対象外です。

動くコンテンツは注意を奪い、認知特性や動きに敏感なユーザーには読めないことがあります。制御手段があれば、ページをユーザーの手に戻せます。

最も簡単な対策は、実際に使える一時停止ボタンです。ユーザーがカルーセルを止め、落ち着いてスライドを読み終えられるようにします。

一時停止は再開できますが、停止は動きを完全に終了させます。ユーザーが本当に主導権を持てるなら、どちらでもルールを満たします。

動く要素を完全に非表示にできるようにするのが最善の場合もあります。ティッカーに閉じる操作を用意すれば、注意をそらす要素を完全に取り除けます。

カルーセルは、ユーザーがホバーしたときや Tab キーでフォーカスを移したときにも一時停止するべきです。読んだり操作したりする際に、自動切り替えが邪魔になりません。

一時停止ボタン自体も、明確なラベルが付いたキーボード操作可能なものにする必要があります。誰にも見つけられない操作は、要件を満たしません。

特に、動きを減らす設定のユーザーには自動再生しないのが最善です。設定の確認と、目に見える一時停止操作を組み合わせてください。

実際のところ、多くのカルーセルは自動切り替えなしのほうが使いやすくなります。ユーザーが自分のペースでクリックして進めれば、問題はなくなります。

自動的に動くコンテンツには、ユーザーが操作できる一時停止、停止、非表示のいずれかが必要です。キーボードで操作できるようにし、動きを減らす設定では自動再生を省いてください。✅