CSSアニメーションで考慮するアクセシビリティ

こんにちは。田村です。
今回は、アニメーションのアクセシビリティ についてお話したいと思います。
ウェブサイトにアニメーションを導入するケースはありますが、一部のユーザーにとっては 動きが負担 になり、体調不良や情報アクセスの妨げとなる場合があります。
そうしたリスクを減らしつつ、アニメーションのメリットを生かすためのポイントをまとめました。

なぜアニメーションのアクセシビリティが必要か

動きによる不快感の防止

画面の急激な変化は、一部のユーザーにめまいや吐き気などの症状を引き起こす恐れがあります。

ユーザー操作の確保

速い動きや点滅・フラッシュが続くと、ユーザーが 操作に集中できなかったり、重要な情報を見逃す原因になることがあります。

WCAG達成基準への対応

達成基準 2.2.2: 一時停止、停止、非表示を理解する
達成基準 2.3.1: 3 回の閃光、又は閾値以下を理解する
これらのガイドラインを満たすことで、幅広いユーザーが安心して利用できるコンテンツになります。

代表的な対策

prefers-reduced-motion の活用

OSやブラウザ設定で「アニメーションを減らす」を選んでいるユーザーの意向を尊重する仕組みです。
たとえば以下のように、ユーザーが「reduce」を指定している場合はアニメーションを完全にオフにしたり、軽減するように切り替えます。

/* 通常のアニメーション */
.slider {
  animation: slide 5s linear infinite;
}

/* 動きを減らすことを希望するユーザーにはアニメーションを停止 */
@media (prefers-reduced-motion: reduce) {
  .slider {
    animation: none;
  }
}

ポイント
必ずしも「none」にするだけが正解ではありません。
必要な動きであれば、時間を短くする・ループ回数を減らすなどアニメーションの「軽減」を検討しましょう。
サイト全体を一律にカットするのではなく、コンテンツの重要度によって調整する方法も有効です。

アニメーションの一時停止ボタン・停止

ユーザーが見たくない、止めたいと思ったときに、Pause/Stop ボタンなどを提供すると安心です。
CSS のみでも :hover や :focus を使って animation-play-state: paused; を適用できますが、ホバーはタッチデバイスに対応しないなどの制約があります。
必要に応じて JavaScript でイベントをトリガーし、停止させる方法も検討しましょう。

点滅やフラッシュを避ける

急激な点滅やフラッシュは、光過敏性てんかんの発作リスクを高めます。
WCAG 2.3.1「1秒間に3回以上の閃光を起こさないようにする」ことが推奨されています。
点滅やフラッシュを多用するのではなく、徐々に色を変化させる、もしくは 1 秒に 1 回以下に抑えるなどの工夫が必要です。

過度に大きく動き回る演出を避ける

画面の大部分が揺れたり回転したりすると、一部のユーザーによっては不快感を感じます。
また、想定外のスクロール移動や、マウスオーバーで画面が急に動くなどの刺激も避けたほうが無難です。
必要最低限の動きに留めたり、ゆるやかな速度にするなどの配慮が望ましいでしょう。

少し気を遣ったアニメーションを意識する

小さく動かす、少し動かす

派手な演出をしなくても、わずかな変化でユーザーの注意を引ける場合が多くあります。

アニメーションを完全に消さずに「短縮」する

たとえば、5 秒を 2 秒に短縮する、ループを 1 回に減らすなど、「ある程度の動き」を残して演出する方法も効果的です。

フォーカス制御・スクリーンリーダーでの案内

キーボード操作ユーザーやスクリーンリーダー利用者が混乱しないよう、アニメーションによる状態変化を適切にアナウンスし、操作しやすい仕組みにすることが大切です。

ユーザー層を広げるために

大きな動きが苦手な人や、画面を見るだけで疲れてしまう人にも配慮すると、サイトの潜在的な利用者は確実に広がります。

まとめ

prefers-reduced-motion
OS やブラウザの設定を意識し、アニメーションが苦手なユーザーを取りこぼさない。
一時停止やオプトアウトの選択肢を提供
「Pause/Stop」ボタンやホバー・クリックなど、ユーザーにコントロール権を渡す。
フラッシュや急激な動きを極力回避
WCAG の閃光ガイドラインを意識して、安全な動きを心がける。
フォーカス制御と操作性を考慮
モーダルの表示や画面の一部をアニメーションする際、キーボード操作やスクリーンリーダー利用者が混乱しないよう配慮する。
「必要な部分だけ」動かすアプローチ
目的に合った演出を検討し、不要なアニメーションは停止または軽減する。

アニメーションは、視覚的な楽しさや操作性の向上など、多くのメリットをもたらします。しかし、一部のユーザーにとっては負担になる可能性もあります。

少しの配慮が、より多くのユーザーに快適に利用してもらえるウェブサイトを実現します。
ぜひ、アクセシビリティを意識したアニメーションの実装に取り組んでみてください。

告知

2025年1月31日（金）21:00～29:00 開催の「#朝までマークアップ 2（CSS編）」に出演いたします。
当日は、CSS アニメーションに関するお話をします。この記事にご興味を持っていただけましたら、ぜひご参加ください！