アクセシブルなモーション: 意味を失わずに、優先的に削減されたモーションを設計する
動作軽減設定と前庭障害を考慮した動作を設計する方法: WCAG で必要なもの、削除するもの、保持するもの、およびテスト方法。
核心
ユーザーがモーション削減をオンにすると、すべてのアニメーションの意味は維持されますが、動きは削除されます。つまり、スライド、ズーム、視差を短いフェードまたは即時変化に置き換え、自動再生ループを停止し、何かを伝えるためにモーションだけに依存しないでください。 Web では、prefers-reduced-motion メディア クエリを使用して設定を検出します。
なぜそれが重要なのか
一部の人にとって、画面上の動きは好みの問題ではありません。 W3Cは、アニメーションが前庭障害を引き起こす可能性があり、吐き気や片頭痛などの反応を引き起こし、重篤な場合には回復のために床上安静が必要になると指摘している。オペレーティング システムでは、モーションの削減を要求できますが、Web では、その要求は、prefers-reduced-motion メディア クエリとして公開されます。ユーザーが設定をオンにすると、その値は減少します。
WCAG が求めるもの
2 つの WCAG 成功基準はモーションをカバーします。 2.2.2 一時停止、停止、非表示は、カルーセルやループ アニメーションなど、自動的に開始されるモーションに適用され、一時停止、停止、または非表示にする方法が必要です。 2.3.3 インタラクションによるアニメーション (レベル AAA) は、ユーザー インタラクションによってトリガーされるモーションに適用され、不必要なアニメーションを回避するか、アニメーションをオフにするコントロールを提供するか、オペレーティング システムのモーション削減設定を使用することを提案します。 AAA が必須でない場合でも、AAA に従うことをお勧めします。
動きを取り除き、意味を保つ
動きが減少しても、フィードバックがないわけではありません。ボタンを押したユーザーは、それが機能したことを知る必要があります。目標は、状態の変更を維持し、トラベルをドロップすることです。
- 削除または縮小: 大きなスライド、ズーム、視差、スクロールに連動した動き、回転、自動再生ループ、背景ビデオ。
- 保持: 色と不透明度の変更、フォーカス インジケーター、短い状態遷移、進行状況情報。
- 置換: ページとパネルのトランジションを短いクロスフェードまたは瞬時の変更で行います。
- 決してしない: エラー、変更、または新しい項目を示す唯一の方法としてモーションを使用します。
実装する
Web では、必須でないモーションを @media でラップするか (prefers-reduced-motion: no-preference)、@media 内でオーバーライドします (prefers-reduced-motion:reduce)。 JavaScript で、window.matchMedia('(prefers-reduced-motion:reduce)') を読み取り、変更をリッスンします。ネイティブ プラットフォームは同じ設定を公開しています。SwiftUI、UIKit、Android ではすべてそれを確認できます。デザイン システムにモーション トークンがある場合は、各コンポーネントに対して縮小バリアントを定義して、すべてのコンポーネントが同じように動作するようにします。
テスト
オペレーティング システムでモーション軽減を有効にして、すべての主要なフローを確認します。重要なものが失われていないこと、ループが自動的に開始されていないこと、スクロールによってコンテンツがスクロール自体の動作を超えて移動していないことを確認してください。ブラウザ開発者ツールでも設定をエミュレートできます。
実装コード例
/* Default: motion only for people who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
.panel { transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 200ms; }
.panel[data-state="closed"] { transform: translateY(24px); opacity: 0; }
}
/* Reduced motion: keep the state change, drop the travel */
@media (prefers-reduced-motion: reduce) {
.panel { transition: opacity 150ms linear; }
.panel[data-state="closed"] { opacity: 0; }
}
/* JavaScript: read the setting and react to changes */
const query = window.matchMedia('(prefers-reduced-motion: reduce)');
let reduceMotion = query.matches;
query.addEventListener('change', (e) => { reduceMotion = e.matches; });覚えておきたい原則
- 動くと体調を崩す人もいます。設定を尊重する
- 移動、ズーム、視差、自動再生を削除します。状態の変化とフィードバックを保持する
- WCAG 2.2.2 は自動モーションをカバーします。 2.3.3 はインタラクションからのモーションをカバーします
- それぞれのネイティブ プラットフォームでの設定を、prefers-reduced-motion で検出します。
- 各モーション トークンの縮小バリアントを設計する
よくある質問
出典
- Understanding SC 2.3.3: Animation from Interactions — W3C WAI
- Understanding SC 2.2.2: Pause, Stop, Hide — W3C WAI
- prefers-reduced-motion — MDN ウェブ ドキュメント
- Motion — Apple ヒューマン インターフェイス ガイドライン