ユーザーのプリファレンスに応じて過度なアニメーションを無効にする「prefers-reduced-motion」
ウェブコンテンツにおけるアニメーションは、アクセシビリティの問題を引き起こすことがあります。W3C が勧告している WCAG (Web Content Accessibility Guidelines) でも、インタラクションに伴うアニメーションに関して、下記の達成基準が設けられています。
アニメーションが、機能又は伝達されている情報に必要不可欠でない限り、インタラクションによって引き起こされるモーションアニメーションを無効にできる。
出典 : WCAG 2.1 達成基準 2.3.3 「インタラクションによるアニメーション (レベル AAA)」
インタラクションの視覚表現として、必要以上の過度なアニメーションを盛り込んでしまうと、ユーザーのコンテンツへの集中を阻害したり、注意力を散漫にさせてしまうことがあります。さらには、前庭機能障害 (平衡感覚の狂い) によるめまい、頭痛、吐き気を引き起こしてしまう恐れもあります。いわゆるトランジション効果やパララックス (視差) 効果を実装する際には、十分な注意が必要です。
ところで上記の WCAG 達成基準では、過度なアニメーションであっても、それを何らかの方法で無効にできればよいとされていて、その具体的な手法として、CSS のメディアクエリで prefers-reduced-motion を用いる実装が例示されています。(参考 : C39: モーションの防止に CSS reduce-motion クエリを使用する - WCAG 2.1 達成方法集)
prefers-reduced-motion とは？
prefers-reduced-motion とは、ユーザーのプリファレンス設定に応じて余計な動きを軽減するための、CSS のメディア特性 (media feature) です。W3C の Media Queries Level 5 で追加された仕様で、具体的には以下のようにメディアクエリを用いて、余計な動きを無効にするスタイルを記述します。
@media (prefers-reduced-motion: reduce) {
// 必要不可欠でないアニメーションを無効にするスタイルをここに記述。
}
このメディアクエリによって、ユーザーが利用デバイスで「余計な動きを止める」プリファレンス設定をすると、必要以上のアニメーションが無効になる、という実装が可能になります。このプリファレンス設定は、ユーザーの利用デバイスの OS によって、たとえば以下のように用意されています。
- Windows 10
- 設定 > 簡単操作 > ディスプレイ >「Windows にアニメーションを表示する」をオフにする。
- macOS Big Sur
- システム環境設定 > アクセシビリティ > ディスプレイ >「視差効果を減らす」をオンにする。
- iOS 14
- 設定 > アクセシビリティ > 動作 >「視差効果を減らす」をオンにする。
- Android 9
- 設定 > ユーザー補助 >「アニメーションの削除」をオンにする。
prefers-reduced-motion を免罪符にしない
prefers-reduced-motion を用いた実装は、必要不可欠でないアニメーションを無効にできる手段をユーザー側に提供しているという点で、一応は WCAG の達成基準を満たしていると言えるでしょう。しかしその一方で、prefers-reduced-motion を免罪符のように捉えて「デフォルトでは過度なアニメーションを採用しても OK」とする解釈も成り立ってしまうことを、私は懸念しています。
もっとも危惧されるのは、上述のプリファレンス設定を知らない (デバイスの普段使いにおいて支援技術に馴染みのない) 人々を含む、基本的にデバイスをデフォルト設定で利用しているユーザーに対して、めまい、頭痛、吐き気といった症状を引き起こしてしまうことです。 たとえそこまで深刻な症状には至らずとも、ユーザーに不快感を伴うネガティブな体験 (UX) もたらす恐れがあります。そうしたリスクを防ぐためには、デフォルトにおいても、アニメーションは最小限のものにとどめておくのがよいのでは、というのが私の考えです。
最小限のアニメーションとは、ユーザー操作に呼応するフィードバックの認知や、重要な情報提示に対する気づきを支援するための、充分かつ控えめな動きです。あるいは、エモーショナルな演出であっても、ユーザーの情報認知や思考を乗っ取ることがない程度の控えめな動きです。
このようにユーザーに配慮して慎重にデザインされたアニメーションであれば、prefers-reduced-motion という特殊なモードに限定的に押し込んでしまうのではなく、これをデフォルトとして採用するほうが、多種多様なコンテキスト (様々な障害や利用文脈) を抱えたユーザーに対して優れた体験 (UX) を提供することができるのではないでしょうか。そのうえで必要であれば保険的に、一切のアニメーションを排したスタイルを prefers-reduced-motion で定義する、というのも一考かと思います。