0Pricing
Web Accessibility Academy · レッスン

CSSとJSでのprefers-reduced-motion

ユーザーのモーション設定を検出し、尊重します。

「CSSとJSでのprefers-reduced-motion」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

読み取れる設定

OS では、動きを減らしたいというユーザーの希望を指定できます。prefers-reduced-motionメディア特性を使えば、その選択をサイトで直接取得できます。🎚️

ユーザーが設定する場所

ユーザーは macOS、iOS、Windows、Android の OS 設定で動きを減らすを有効にします。開発者の役割は、選択を疑うことではなく、その設定を読み取ることです。

2つの値

このメディア特性が返す状態は 2 つです。アニメーションを控えめにすることを意味するreduceか、それ以外のユーザーを表す no-preference のどちらかです。

CSS で問い合わせる

動きを抑えるスタイルをメディアクエリで囲みます。ユーザーが動きをreduceしたい場合は、トランジションをほとんどなくせます。

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; }
}

常に削除するのではなく減らす

動きを抑えることは、ページを停止させることではありません。大きなスライドを穏やかなフェードに置き換えれば、インターフェースの生き生きとした印象を保ちながら、急な動きを避けられます。

動きありを基本に設計する

通常のアニメーションスタイルを作ってから、メディアクエリで動きを抑えます。このプログレッシブな方法なら、標準の体験を豊かなまま保てます。

JavaScript で読み取る

スクリプトによるアニメーションでは、ブラウザーに直接問い合わせます。matchMediaは、ユーザーが現在、動きを減らす設定にしているかどうかを返します。

const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) { /* skip the big animation */ }

設定の変更に反応する

ユーザーはセッションの途中で設定を切り替えることがあります。変更を監視し、再読み込みなしでJavaScriptのアニメーションが新しい設定に従うようにします。

mq.addEventListener('change', e => updateMotion(e.matches));

スクロール動作にも対応する

スムーズスクロールも動きに含まれます。メディアクエリ内でscroll-behaviorを auto に設定すれば、希望するユーザー向けに移動を即時にできます。

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

現実に必要な配慮

これは、あれば便利という程度の切り替えではありません。大きな動きによって吐き気やめまいを感じるユーザーもいるため、希望を尊重することが重要です。

デフォルトではオフが安全

迷ったときは、安全な方法をデフォルトにしてください。穏やかな動きを優先しても誰も困らず、すべてのユーザーにとって快適なページになります。

理解度チェック

ユーザーが動きを減らしたいと望んでいることを、Web サイトはどのように知りますか。

復習

CSS または matchMedia でprefers-reduced-motionを読み取り、アニメーションをなくすのではなく穏やかにします。設定が変更された場合にも対応してください。✅

よくある質問

「CSSとJSでのprefers-reduced-motion」レッスンは無料ですか？

はい。「CSSとJSでのprefers-reduced-motion」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「CSSとJSでのprefers-reduced-motion」で何を学びますか？

ユーザーのモーション設定を検出し、尊重します。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「CSSとJSでのprefers-reduced-motion」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. CSSとJSでのprefers-reduced-motion
  2. 前庭障害とパララックスのリスク
  3. 発作を防ぐ3回の閃光しきい値
  4. 自動移動コンテンツを一時停止、停止、非表示にする
← Web Accessibility Academyに戻る