適用 (対象)
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 */
}
検証
手順
利用者のインタラクションによって動くインタラクティブな要素それぞれについて:
- システムの「視差効果を減らす」設定を有効化する、
- その動作が必要不可欠でないことを確認する、
- 要素が動かないことを確認する。
期待される結果
- #2 と #3 の結果が真である。