アニメーションのアクセシビリティ

アニメーションに関係する達成基準

達成基準 2.2.1: タイミング調整可能（レベルA）

• テキストの出現・消失が自動で進行するアニメーションを実装する場合はアニメーション一時停止ボタンをつけてください。
• 限られたスペースの中でテキストがスクロールする演出を実装する際は、テキストブロック全体を静的に読めるメカニズムを提供してください。
  • WCAGの提供している参考実装例： 限られたスペースの中でスクロールするテキスト

達成基準 2.2.2: 一時停止、停止、非表示（レベルA）

• 動き・点滅のあるアニメーションは5秒までにしてください。
  • 参考サイト：新卒採用情報 | 村田製作所 採用情報
    MV右側の「SCROLL」のアニメーションが一定時間で停止します。
• 5秒以上のアニメーションを自動再生させる場合、一時停止の機能を提供してください。
  • 参考サイト：みずほFG：採用情報サイト
    左下の「アニメーション停止」ボタンを押すと、常に動いているアニメーションが停止する。
  • 参考サイト：Netlify Reaches One Million Devs!
    左上の「Turn Animations On」を押すと、すべてのアニメーションが停止する。
  • GiF画像の停止機能実装例： Pausing a GIF with details/summary | CSS-Tricks

達成基準 2.3.3: インタラクションによるアニメーション（レベルAAA）

• prefers-reduced-motionでモーションアニメーションを欲していない人にはアニメーションを止めることができるようにしてください。
  • モーションアニメーションとは、要素が別の場所に移動したりサイズが変わるアニメーションのことです。推移せずに即座に表示される要素や、色、ぼかし又は不透明度が変更だけの要素はモーションアニメーションには含まれません。
  • 参考サイト： 製品・ソリューション：日立
    prefers-reduced-motionをオンにしていると、左右の図形のアニメーションが静止画になる。
  • 参考サイト： The Dark Side of the Grid (Part 2)
    アニメーションの開始・停止をユーザーがコントロールできる。
  • 参考サイト： Animal Crossing series – Official Site
    「REDUCE MOTION」ボタンを押すと、アニメーションを少なくできる。prefers-reduced-motionがオンの人には最初からアニメーション少なめの表示となる。

達成基準 2.3.1: 3回の閃光、又は閾値以下（レベルA）
達成基準 2.3.2: 3回の閃光（レベルAAA）

• アニメーションで閃光を使う場合は1秒で3回までとしてください。
  • 光感受性による発作対策の項目です。実際に起きた事件としてはポリゴンショックなどがあります。
  • 2.3.1は、一定の閾値以下であれば3回以上の閃光でも良いとしています。しかし、その閾値を測ることは難しいため、基本的には2.3.2を達成することが無難です。

アニメーションの弊害

アニメーションは、視覚的に情報を理解しやすくする・注意を惹きつける・コンテンツを印象的にするなどの効果があります。
一方、ユーザーを注意散漫にさせる、又は吐き気を催す恐れがあるため注意が必要です。

酔いやすいアニメーションの要因

酔いやすいアニメーションの要因は以下が挙げられます。
参照元： DESIGNING SAFER WEB ANIMATION FOR MOTION SENSITIVITY – A LIST APART

動くエリアの相対的なサイズが大きい（RELATIVE SIZE OF MOVEMENT）

画面の中で動くエリアが占める割合が大きいほど酔いやすいです。例えば画面全体をカバーする全画面ワイプ・トランジションなどは酔いを招きます。相対的なサイズの小さいボタンのアニメーションなどは問題が生じる可能性は低いです。

方向と速度が一致していない（MISMATCHED DIRECTIONS AND SPEED）

誇張されたパララックス効果やスクロールロックを用いたアニメーションなどでが該当します。背景のオブジェクトが前景のオブジェクトとは異なる速度で移動したり、ユーザーがスクロールしている方向とは異なる方向に移動するアニメーション、またはユーザーがスクロールしている速度に直接関係していないアニメーションはユーザーが酔う原因となりやすいです。

空間領域の移動量が多い（DISTANCE COVERED）

アニメーションによってカバーされる空間距離の量（z軸の移動）が多いと酔いやすいです。 iOS7の3Dズーム機能の奥からズームしてくる演出は一部のユーザーから深刻なクレームを生みました。スクロールすると手前から奥に移動するなどの演出などは注意が必要です。