アクセシビリティのためのアニメーション削減
prefers-reduced-motionを使用してユーザーのアクセシビリティ設定を尊重。前庭障害を持つユーザーのためにアニメーションを無効化または簡素化。
User Preferences
詳細な説明
prefers-reduced-motionの尊重
prefers-reduced-motionメディア機能は、ユーザーがOSのアクセシビリティ設定で最小限のアニメーションを要求しているかを検出します。
クエリ
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
重要性
40歳以上の約35%の成人が何らかの前庭機能障害を経験しています。アニメーション、パララックス効果、自動再生動画は、めまい、吐き気、頭痛を引き起こす可能性があります。
無効化すべきもの
- CSSトランジションとアニメーション
- パララックススクロール効果
- 自動再生カルーセル
- スムーススクロール動作
ユースケース
アニメーションを含むすべてのプロジェクトでこのクエリを使用してください。WCAG 2.1ガイドライン 2.3.3（インタラクションからのアニメーション）で期待される必須のアクセシビリティ要件です。