reduce motionについて調べてみた

accessible-usable.net/2021/09/entry_210919.html

ユーザーのプリファレンスに応じて過度なアニメーションを無効にする「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 とは、ユーザーのプリファレンス設定に応じて余計な動きを軽減するための、CSS のメディア特性 (media feature) です。W3C の Media Queries Level 5

developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-reduced-motion

prefers-reduced-motion - CSS: カスケーディングスタイルシート | MDN

Firefox では、 reduce の要求は以下の場合に尊重されます。 GTK/GNOME では、 GNOME Tweaks > General タブ (バージョンによっては Appearance タブ) > Animations がオフになっている場合。 Windows 10: 設定 > 簡単操作 > ディスプレイ > アニメーションを表示する Windows 7: コントロールパネル > コンピューターの簡単操作センター > コンピューターでの作業に集中しやすくします > 必要のないアニメーションは無効にします (可能な場合) macOS: システム設定 > アクセシビリティ > 表示 > 動きの抑制 iOS: 設定 > 一般 > アクセシビリティ > 視覚効果を減らす Android 9 以上: 設定 > ユーザー補助 > アニメーションの削除 Firefox では about:config: 数値型の設定項目 ui.prefersReducedMotion を追加し、値を 1 とします。この設定の変更は直ちに効果が現れます。