この記事は最終更新日から1年以上経過しています。
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 アニメーションに関するお話をします。この記事にご興味を持っていただけましたら、ぜひご参加ください！
関連記事
この記事のハッシュタグ #Accessibility #CSS #アニメーション から関連する記事を表示しています。
CSSでコマ送りのように動きを切り替えるアニメーション
こんにちは。田村です。 CSSアニメーションで、コマ送りのような「カクカク」と動きを切り替えるアニメーションを作りたい場合がありました。 そんなときはsteps() 関数を使うと実現可能です。 steps() とは？ steps() は、CSSアニメーションの animation-timing-function プロパティで使われる関数の一つです。 通常のアニメーションが滑らかに動くのに対し、steps() を使うと 「段階的に進むアニメーション」 を作ることができます。 どんな場面で使えるのか？ スプライトアニメーション 1枚の画像に複数のフレームを描き、steps() を使って特定のフレームごとに切り替えることができます。 コマ送りアニメーション 動画を再現するようなアニメーションをCSSで実現できます。 進行状況を表現 プログレスバーなど進行状況の表示に使用できます。 基本的な使い方 steps() 関数には、2つの主要な引数があります。 steps(段階数, タイミング) 段階数 アニメーションを何段階に分割するかを指定します。 steps(4) → 4段階の動き タイミング jump-none 0%と100%の状態を表示して間は均等に埋める jump-start / start コマの最初に動くので開始時0%の状態は見えない jump-end /end コマの最後に動くので終了時100%の状態が見えない jump-both startとendの動きをして間を埋めるので0%と100%の状態が見えない .element { /*アニメーションを4段階に分けて、各ステップが終了後に切り替わる。*/ animation: example 4s steps(4, end) infinite; } @keyframes example { from { background-position: 0 0; } to { background-position: -400px 0; } } まとめ steps()関数は段階的な動きが必要なアニメーションに利用できます。 また、start と end の使い分けで、タイミングを調整できます。 スプライトアニメーションやプログレスバー、コマ送りなど、幅広い用途に活用可能ですのでぜひ試してみてださい！
スタッフブログ
ユーザーの設定をCSSアニメーションに反映させる
こんにちは。田村です。 CSSアニメーションはリッチな動きが表現でき便利ですがユーザーによってはアニメーションをオフにしたいということがあります。 OS側で「動きをへらす」という設定があり、これをCSS側で判断したい場合はありました。 prefers-reduced-motion とは？ prefers-reduced-motion は、ユーザーのOSやブラウザの設定に基づいて、動きの多いアニメーションやエフェクトを制御するためのCSSメディアクエリです。 OSの設定で「動きを減らす」という設定が提供されており、この設定が有効になっているユーザーに対し、アニメーションを軽減するスタイルを適用できます。 次のように読むそうです。 prefers-reduced-motion（プリファーズ・リデュースド・モーション） prefers（プリファーズ）：好む reduced（リデュースド）：減少した motion（モーション）：動き どんな場面で使えるのか？ 動きが苦手なユーザーへの配慮 激しいアニメーションや過剰な動きを好まないユーザーに快適なユーザー体験を提供できます。 アクセシビリティ向上 WCAGの達成基準にも含まれています。 「達成基準 2.3.3: インタラクションによるアニメーションを理解する」 基本的な使い方 prefers-reduced-motion は、CSSのメディアクエリとして以下のように使います。 /* 通常時のスタイル */ .animated-box { animation: bounce 2s infinite; } /* 動きを抑える設定の場合 */ @media (prefers-reduced-motion: reduce) { .animated-box { animation: none; } } まとめ prefers-reduced-motion は、ユーザーが動きを減らす設定をしている場合に、アニメーションを無効化または軽減できるCSSメディアクエリです。 動きに敏感なユーザーにも優しい動きを提供し、アクセシビリティを向上することができます。
スタッフブログ
