アクセス可能なWebアニメーション：アニメーション上のWCAGが説明しました

アクセス可能なWebアニメーションの作成は、思慮深い計画と実行で達成可能です。ユーザーエクスペリエンス（UX）と使いやすさに焦点を当てた戦略的設計の選択が重要です。 Webコンテンツアクセシビリティガイドライン（WCAG）は、アクセス可能なアニメーションの戦術的なガイダンスを提供します。実装の詳細はコンテキストによって異なりますが、WCAGは一時停止/再生コントロール、点滅制限、およびモーションオプションの削減に関する推奨事項を提供します。仕様（バージョン2.1）は、アクセス可能なWebアニメーションを設計するための更新された価値のある洞察を提供します。

重要なWCAGの推奨事項を調べましょう。

一時停止、停止、非表示

このガイドラインは、他のコンテンツと一緒に提示された5秒以上持続するコンテンツの移動、点滅、またはスクロールを自動的に開始し始め、それを一時停止、停止、または非表示にするメカニズムを提供する必要があることをアドバイスしています。そのような動きが活動に不可欠である場合、例外が存在します。これは、累積運動が5秒を超えるループイラスト、またはループイラストなど、自動アドバンシングカルーセル、アニメーション化された背景、ループイラストなどの状況に適用されます。

一時停止、停止、非表示の実装

より長いアニメーションの場合は、一時停止/再生コントロールを組み込みます。 WCAGはコントロール設計を決定しません。創造的な自由が許可されています。例には、ループアニメーション用の再生/停止ボタン、またはシングルプレイアニメーション用のリプレイボタンが含まれ、デザインにシームレスに統合されています。ループアニメーションGIFもこのようなコントロールを必要とします。ローダーとプリロダーは、このガイドラインの例外です。

3つのフラッシュまたはしきい値以下

この推奨事項は、画面フラッシュからの発作のリスクに対処します。ガイドラインには、Webページが1秒あたり3回以上点滅するもの、または指定されたフラッシュと赤のフラッシュのしきい値を超えるものを含めるべきではありません。

3つのフラッシュしきい値を満たします

1秒あたり3回を超える点滅を避けることは、最も安全なアプローチです。文体的な選択には、点滅（たとえば、レトロゲームの美学など）が組み込まれる可能性がありますが、この限界を超えると、アクセシビリティのリスクがあります。避けられない場合は、高度な警告と代替の非フラッシングバージョンを提供します。 WCAGは、詳細な安全な点滅しきい値を提供します。

WCAGの適合レベル（A、AA、AAA）

WCAGは、適合レベルを定義します。A（最小）、AA（中間、AおよびAAコンプライアンスが必要）、およびAAA（最高、A、AA、およびAAAコンプライアンスが必要）。レベルAAは、一般的にWebサイトのアクセシビリティを対象としています。 「一時停止、停止、非表示」および「3つのフラッシュ」ガイドラインは、AAに該当します。

インタラクションからのアニメーション

このガイドラインは、ユーザーと相互作用がトリガーされたアニメーションに焦点を当てており、次のように述べています。インタラクションによってトリガーされるモーションアニメーションは、機能または伝達された情報に不可欠でない限り無効にする必要があります。 「Motion Animation」とは、色、ぼやけ、または不透明な変化を除く、動きの幻想を生み出すアニメーションを特に指します。

削減されたモーションオプションの実装

モーションの感受性に対処するには、次のことを検討してください。

• 不要なアニメーションを避ける：アニメーションのコンテキストと適切性を評価します。
• ユーザーコントロールの提供：非必須モーションを無効にするトグルまたは設定を提供します。
• レバレッジはprefers-reduced-motion ：このメディアクエリを利用して、ユーザーのOSレベルの削減されたモーション設定を検出および応答し、代替のモーションが少ないアニメーションのバージョンを提供します。これは、CSSまたはJavaScriptで実装できます。

CSSでのprefers-reduced-motionを使用する：

 / *アニメーションのバウンス */
H2 {
  アニメーション：1.5S線形無限の代替バウンス。
}

/ *モーションの代替量を減らす */
@media（reduced-motion：reduce）{
  H2 {
    アニメーション：両方の0.5sをフェードします。
  }
}

カスタムトグルを組み合わせて、 prefers-reduced-motion広範なアニメーションを備えたサイトに堅牢なソリューションを提供します。

結論

これらのWCAGガイドラインを順守することで、アクセス可能なWebアニメーションを作成し、より幅広い視聴者がWebサイトと有意義に対話できるようにすることができます。アクセシビリティはアニメーションを超えていることを忘れないでください。全体的なアプローチのために追加のリソースを調べてください。

以上がアクセス可能なWebアニメーション：アニメーション上のWCAGが説明しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。