⛔

アニメーションが効かない原因は「視差効果を減らす」かも？そしてアクセシビリティへ

安田学

2023/07/14に公開

アクセシビリティ

アニメーション

tech

あるプロジェクトでCSSアニメーションを実装したけれど、iPhoneの実機で確認すると動かない…なんてことがありました。
今回起こった原因とその背景、「視差効果を減らす」に関連する設定方法をまとめました。

原因はリセットCSS

今回のプロジェクトで「modern CSS reset」が使用されていて、以下のような記述があることが原因でした。

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

CSSでスムーススクロールを設定するscroll-behaviorをautoにして瞬時に移動させる
アニメーション速度を0.00001 秒にして瞬時に完了させる
アニメーションの繰り返しを1回に制限する

上記のような指定がされているので、アニメーションは実際に適用されているけど、体感する間もなく終わってしまうことになります。
noneなどでアニメーションを無効にしていないのは、アニメーションが完了する前提でCSSが書かれていると、要素が表示されないままになる可能性を考慮しているようです。

ちなみにprefers-reduced-motionは、すべてのモダンブラウザで対応済みです。

"prefers-reduced-motion" | Can I use... Support tables for HTML5, CSS3, etc

JavaScriptでもwindow.matchMedia('(prefers-reduced-motion: reduce)');のように判定が可能です。

prefers-reduced-motion: Sometimes less movement is more

今回はリセットCSSでしたが、その他のCSSやJSのライブラリでも対応しているものがあるので、注意が必要そうです。

対策

やや抽象的ですが、以下のような対策が考えられます。

アニメーションが無効化されても、機能を損なわないデザインにする
アニメーションが無効化されても、コンテンツがすべて表示できて操作できるコーディングをする
prefers-reduced-motionを使ってアニメーションの有効・無効に関わらず最適な機能を提供する
アニメーションを無効化・停止する機能を提供する

アニメーションの無効化に対応したほうがいいのか

結論から言うとYESです。

ユーザーのプリファレンスに応じて過度なアニメーションを無効にする「prefers-reduced-motion」 | Accessible & Usable

上記の記事がわかりやすいのですが、「注意欠陥障害」のある方には活動に集中できなくさせてしまったり、「前庭機能障害」のある方にはめまい・頭痛・吐き気などの症状を引き起こしてしまう可能性もあるようです。
そこまでいかなくても、大きく動くのが苦手だったり、スクロールハイジャックが好きではなかったりする利用者も一定数いると思います。

WCAGでは以下の項目に該当しそうです。