アニメーション：動きの軽減、一時停止、理解度を確認します。

このガイドが達成するのに役立つこと

• インベントリトリガー
• 動作の制限を定義する
• WCAG基準を分離する
• すべての実装をテストする

クイックチェック

• 動作を簡略化すると、すべてのアニメーションが禁止されるのか？
• 基準2.3.3レベルAAは適切か？
• グローバルCSSルールで十分か？

手順

1. 1

   インベントリトリガー

   自動、インタラクショントリガー、スクロール連動のモーションを一覧表示する。 状態情報と装飾を分離する。 JavaScriptアニメーション、ビデオ、埋め込み要素も検査する。

   成果物：エフェクトと目的の登録簿。

2. 2

   動作の制限を定義する

   prefers-reduced-motionは、不要なモーションを削減したいという要望を示す。 情報とコントロールを維持しながら、静的または静かな代替手段を提供する。 大きな移動を、別の注意をそらすエフェクトに置き換えることは避ける。

   成果物：コンポーネントごとの動作の削減。

3. 3

   WCAG基準を分離する

   インタラクションアニメーション基準2.3.3はレベルAAAである。 レベルA基準2.2.2は、必須でない限り、他のコンテンツと並行して5秒以上続く特定の自動モーションなどを対象としている。 該当する基準の条件を確認する。

   成果物：各エフェクトの基準とコントロール。

4. 4

   すべての実装をテストする

   読み込み前とセッション中に設定をエミュレートする。 スタイル、スクリプト、プログラムによるスクロールを検査する。 アニメーションの完了に状態が依存する場合は、アニメーションが削除された場合でも、確実な結論が得られるようにしてください。

   成果物：コールドロード、ライブチェンジ、最終状態のテスト。

5. 5

   情報とコントロールの保持

   両方のモードで、読み取り、キーボード操作、エラーフィードバックをテストしてください。 影響を受ける自動動作については、読み取り中に一時停止、停止、非表示、および安定性をテストしてください。 すべてのアニメーションを必須とラベル付けするのではなく、例外事項を文書化してください。

   成果物：証拠と制限事項。

再利用可能なワークシート

承認された観察結果を記入してください。 これらのフィールドは作業用テンプレートであり、観察結果ではありません。

メカニズムの区別

管理指標

よくある間違い

• スクリプトもチェックする
• キーボード操作可能にする
• 進行状況やエラーのフィードバックを削除しない