すべてのユーザーに優しいWebデザイン：prefers-reduced-motionメディアクエリを活用したアクセシビリティ対策

構文

@media (prefers-reduced-motion) {
  /* アニメーションや動きを軽減するCSSスタイル */
}

例

以下の例では、prefers-reduced-motion メディアクエリを使用して、ユーザーがアニメーションを軽減することを選択した場合に、Webページのすべてのアニメーションを無効化します。

@media (prefers-reduced-motion) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

prefers-reduced-motion メディアクエリは、まだ比較的新しい機能であり、すべてのブラウザで完全にサポートされているわけではありません。
prefers-reduced-motion メディアクエリは、ユーザー設定に基づいて動作するため、すべてのユーザーに適用されるわけではありません。

利点

特定のユーザーにとって潜在的な発作やめまいのリスクを軽減します。
ウェブサイトをよりアクセスしやすく、使いやすいものにします。
ユーザーが自分の好みに合わせてWebページを体験できるようにします。

実装方法

prefers-reduced-motion メディアクエリをCSSコードに含めます。
ユーザーがアニメーションを軽減することを選択した場合に適用されるスタイルを定義します。
必要に応じて、他のメディアクエリと組み合わせて使用します。

上記に加えて、prefers-reduced-motion メディアクエリを使用して、以下の操作を実行することもできます。

アニメーションの再生方法を変更する
アニメーションの速度を遅くする
特定のアニメーションのみを無効化する

例 1：すべてのアニメーションを無効化する

@media (prefers-reduced-motion) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

例 2：特定のアニメーションのみを無効化する

この例では、prefers-reduced-motion メディアクエリを使用して、ローディングアニメーションのみを無効化します。

@media (prefers-reduced-motion) {
  .loading-animation {
    animation: none !important;
  }
}

例 3：アニメーションの速度を遅くする

@media (prefers-reduced-motion) {
  * {
    animation-duration: 2s !important;
  }
}

@media (prefers-reduced-motion) {
  * {
    animation-play-state: pause !important;
  }
}

アニメーションをトリガーするユーザーインタラクションを変更する
ユーザー設定に基づいて代替コンテンツを表示する
特定のデバイスでのみアニメーションを無効化する

特定の種類のアニメーションのみを検出できます。
ユーザー設定に基づいて動作するため、すべてのユーザーに適用されるわけではありません。
比較的新しく、すべてのブラウザで完全にサポートされているわけではありません。

これらの制約により、@media.prefers-reduced-motion メディアクエリに完全に依存することは推奨されていません。代わりに、以下の代替方法を検討することをお勧めします。

JavaScript API

JavaScript APIを使用して、ユーザーがアニメーションを軽減することを選択しているかどうかを検出できます。この方法は、@media.prefers-reduced-motion メディアクエリよりも柔軟性が高く、すべてのブラウザでサポートされています。

以下の例は、JavaScriptを使用して prefers-reduced-motion 設定を検出する方法を示しています。

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReducedMotion.matches) {
  // ユーザーはアニメーションを軽減することを選択している
  // アニメーションを無効化または調整する
} else {
  // ユーザーはアニメーションを軽減することを選択していない
  // アニメーションを通常通り実行する
}

アクセシビリティ属性

HTML要素に aria-hidden 属性を追加して、スクリーンリーダーなどの補助技術から要素を隠すことができます。これは、アニメーションを含む要素を非表示にする簡単な方法ですが、視覚的なユーザーには影響を与えません。

以下の例は、aria-hidden 属性を使用してアニメーションを非表示にする方法を示しています。

<div class="animation" aria-hidden="true">
  </div>

Progressive Enhancement

Progressive Enhancementは、基本的な機能をすべてのユーザーに提供し、より高度な機能をサポートするユーザーにのみ追加機能を提供するWeb開発手法です。このアプローチを使用して、アニメーションをすべてのユーザーに提供し、@media.prefers-reduced-motion メディアクエリまたはJavaScriptを使用して、サポートするユーザーにのみアニメーションを強化することができます。

手動設定

Webサイトに設定を追加して、ユーザーがアニメーションの再生を有効/無効にできるようにすることができます。これは、ユーザーにより多くの制御を提供する方法ですが、実装にはより多くの労力が必要です。