モーションの防止に CSS reduce-motion クエリを使用する

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

Cascading Style Sheets (CSS) をサポートするウェブコンテンツ技術を使用したコンテンツ

この達成方法は、達成基準 2.3.3: インタラクションによるアニメーションを理解する (十分) に関連する。

解説

この達成方法は 'prefers-reduced-motion' CSS メディアクエリを使用して、利用者にウェブページでアニメーションが表示されないようにすることを目的とする。

一部の利用者は、動きのあるコンテンツから、注意散漫又は吐き気を経験することがある。例えば、ページのスクロールによって要素が動く (スクロールに伴う必要不可欠な動きを除く) と、前庭障害が発生する可能性がある。これらのアニメーションを構成する CSS をメディアクエリで囲むことで、それらの症状を防ぐことができる。

これの代表的な例としては、背景が前景とは異なる速度で動くパララックススクロールが挙げられる。スクロールによるページの動きは必要不可欠である(かつ利用者のコントロール下にある)が、スクロールによって発生する追加の動きは前庭障害を引き起こす可能性がある。

動きによる起動の理解に関するドキュメントにはモーション軽減設定の変更に関するリンクが含まれる。

事例

事例 1: 'prefers-reduced-motion' CSS メディアクエリ

利用者はシステム内のインタフェースのモーションに関する意向を設定することができ、'prefers-reduced-motion' CSS メディアクエリはその選択を尊重する。モーションに CSS を適用することで、要求した利用者に対しては無効化することができる。

@media (prefers-reduced-motion: reduce) {
  /* CSS to disable motion goes here */
}

'prefers-reduced-motion' CSS メディアクエリの実装例

検証

手順

利用者のインタラクションによって動くインタラクティブな要素それぞれについて:

  1. システムの「視差効果を減らす」設定を有効化する、
  2. その動作が必要不可欠でないことを確認する、
  3. 要素が動かないことを確認する。

期待される結果

  • #2 と #3 の結果が真である。