Webアクセシビリティ達成基準「2.2.2 一時停止，停止及び非表示の達成基準」の話

前回はWebアクセシビリティ達成基準「2.2.1 タイミング調整可能の達成基準」について解説しました。続けて今回は「2.2.2 一時停止，停止及び非表示の達成基準」への対応について解説します。

Webサイトを制作する際、「動きのあるコンテンツ」をどのように扱うかは、見た目の印象だけでなく、ユーザーの使いやすさにも大きく影響します。特に自動で動くスライダーや点滅するバナーなどは、適切に設計しないと、ユーザーにとって大きなストレスとなることがあります。

2.2.2 一時停止，停止及び非表示とは

自動で動くコンテンツに関するルール

「2.2.2 一時停止，停止及び非表示」は、ユーザーの操作に関係なく動き続けるコンテンツに対して、ユーザー自身が制御できる手段を提供することを求める達成基準です。

対象となるのは、以下のようなコンテンツです。

• 自動で切り替わるスライダー（カルーセル）
• 点滅・スクロールするテキスト
• 自動更新されるニュースティッカー
• 動き続けるアニメーション

これらのコンテンツは、視線を奪ったり、操作の妨げになったりするため、一定時間以上動作する場合は、ユーザーが「止める・隠す・一時停止する」ための手段が必要になります。

なぜ対応が必要なのか

ユーザーの負担を軽減するため

自動で動くコンテンツは、一見すると「分かりやすい」「目を引く」といったメリットがあります。しかし、すべてのユーザーにとって有益とは限りません。

例えば以下のようなケースです。

• 読んでいる途中でスライドが切り替わる
• 点滅によって集中力が削がれる
• 動きが気になって本文が読みづらい

特に認知特性や視覚過敏のあるユーザーにとっては、強いストレスや体調不良の原因になることもあります。

操作性・可読性への影響

アクセシビリティの観点では、「ユーザーが自分のペースで情報を取得できること」が重要です。

自動で動くコンテンツが制御できない場合、

• 必要な情報を見逃す
• 操作ミスが増える
• ページ離脱につながる

といった問題が発生します。

つまりこの達成基準は、単なる配慮ではなく、ユーザビリティ向上にも直結する重要な要素といえます。

達成基準の具体的な要件

5秒以上の動きが対象

「2.2.2」では、5秒以上継続する動きのあるコンテンツが対象となります。

例えば、

• 3秒で止まるアニメーション → 対象外
• ループするスライダー → 対象

といった判断になります。

必要な3つの対応

対象となるコンテンツには、以下のいずれかの機能を提供する必要があります。

一時停止（Pause）

動きを一時的に止める機能

停止（Stop）

完全に動作を止める機能

非表示（Hide）

コンテンツ自体を見えなくする機能

実務上は「一時停止ボタン」を設置するケースが最も一般的です。

例外となるケース

以下の場合は例外として対応が不要とされています。

• ユーザーの操作によって開始された動き
• 必須の機能（例：オンラインゲームなど）
• 重要なリアルタイム情報（緊急情報など）

ただし、例外であっても可能な限り配慮することが望ましいです。

実務でよくある対応パターン

スライダー（カルーセル）の対応

企業サイトでよく見られるのが、トップページのスライダーです。

この場合は、

• 自動再生をオフにする
• 一時停止ボタンを設置する
• キーボード操作で制御できるようにする

といった対応が求められます。

特に「自動再生＋操作不可」のスライダーはNGとされるケースが多いため注意が必要です。

点滅・アニメーションの制御

CSSやJavaScriptで実装されたアニメーションも対象になります。

対応方法としては、

• animationを停止できるボタンを設置
• prefers-reduced-motionへの対応
• 無限ループを避ける

などが挙げられます。

特に「prefers-reduced-motion」は、ユーザーのOS設定を尊重する重要な実装ポイントです。

ニュースティッカーや自動更新

テキストが横に流れるニュースティッカーなども対象です。

この場合は、

• スクロール停止ボタンを設置
• 手動スクロールに変更

といった対応が有効です。

実装時の注意点

見た目だけのボタンにしない

一時停止ボタンを設置しても、

• キーボードで操作できない
• スクリーンリーダーで認識できない

といった場合は、アクセシビリティ対応としては不十分です。

ボタンには適切なラベル（aria-labelなど）を設定し、誰でも操作できるようにする必要があります。

初期状態の設計も重要

そもそも「最初から動かさない」という選択も有効です。

最近では、

• 自動再生なし
• ユーザー操作で切り替え

といった設計の方が、結果的にユーザー満足度が高いケースも増えています。

「動きをつけること」が目的になっていないか、一度見直してみるのも重要です。

まとめ

「2.2.2 一時停止，停止及び非表示の達成基準」は、動きのあるコンテンツをユーザーがコントロールできるようにするための重要なルールです。

対応のポイントを整理すると、

• 5秒以上動くコンテンツは対象
• 一時停止・停止・非表示の手段を提供
• スライダーやアニメーションに特に注意
• 操作性（キーボード・支援技術）も考慮

となります。

見た目のインパクトを優先してしまいがちな動的コンテンツですが、アクセシビリティの観点では「ユーザーの負担にならない設計」が求められます。