UI アニメーションがオフになっているページが使用可能であることを確認する

  • [アーティクル]

オペレーティング システムでアニメーションをオフにしたユーザーには、Web ページにアニメーションを表示しないでください。 アニメーションは、製品の使いやすさに役立ちますが、気晴らし、混乱、吐き気を引き起こす可能性もあります。

UI アニメーションがオフ (縮小されたモーション) で Web ページが使用可能であることをチェックするには、レンダリング ツールで、CSS メディアのエミュレート機能の prefers-reduced-motion ドロップダウン リストを使用します。

アクセシビリティ テストのデモ Web ページでは、オペレーティング システムでアニメーションをオフにしたり、DevTools を使用してその設定をエミュレートしたりすると、サイドバー ナビゲーション メニューのリンクを選択しても、Web ページではスムーズなスクロールは使用されません。 これは、CSS のスムーズ スクロール設定をメディア クエリにラップし、 レンダリング ツールを使用して、縮小されたアニメーションのオペレーティング システム設定をエミュレートすることで実現されます。

アニメーションをオフにしてページを使用できるかどうかをチェックするには:

  1. アクセシビリティ テストのデモ Web ページ を新しいウィンドウまたはタブで開きます。

  2. Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 または、 F12 キーを押します。 Web ページの横に DevTools が開きます。

  3. DevTools の アクティビティ バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のツール ] (その他のツール アイコン) ボタンをクリックします。

  4. 左側の [ソース ] ツールの [ナビゲーション ] ウィンドウで、 を選択します styles.css。 CSS ファイルが [ エディター ] ウィンドウに表示されます。

  5. Windows/Linux の 場合は Ctrl + F キー、macOS の場合 は Command + F キーを押し、「」と入力 @mediaします。 次の CSS メディア クエリが表示され、Web ページで使用されていることを確認します。

    @media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

オペレーティング システムの設定をエミュレートしてアニメーションを減らす

オペレーティング システムの設定をエミュレートしてアニメーションを減らすには、

  1. Esc キーを押して、DevTools の下部にあるクイック ビュー パネルを開きます。 クイック ビュー ツール バーの [その他のツール] ([その他のツール] アイコン) ボタンをクリックして、ツールの一覧を表示し、[レンダリング] を選択します。

  2. [ エミュレーション CSS メディア機能 prefers-reduced-motion ] ドロップダウン リストで、[ prefers-reduced-motion: reduced] を選択します。

    縮小されたモーションと、ユーザーが望むときにのみスムーズなスクロールが行われる CSS をシミュレートする

  3. Web ページで、 馬 や アルパカスなどの青いメニュー項目をクリックします。 これで、スムーズスクロールアニメーションを使用するのではなく、選択したセクションに Web ページが即座にスクロールします。

  4. レンダリング ツールの下の [Css メディア機能のエミュレート] の下にある [より低いモーション] を選択し、[エミュレーションなし] を選択してこの設定を削除します。

デモ Web ページでは、上記のメディア クエリとエミュレーション設定を使用しても、次のアニメーションが引き続き実行されます。 Web サイトをビルドするときは、同様のすべてのアニメーションを修正してください。

  • 青いメニュー項目の上にマウス ポインターを合わせるときのアニメーション。
  • [ その他 ] リンクの上にマウス ポインターを置くと、円のアニメーションが表示されます。

関連項目