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

重要なWCAGの推奨事項を調(diào)べましょう。

一時停止、停止、非表示

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

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

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

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

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

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

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

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

WCAGは、適合レベルを定義します。A（最?。A（中間、AおよびAAコンプライアンスが必要）、およびAAA（最高、A、AA、およびAAAコンプライアンスが必要）。レベルAAは、一般的にWebサイトのアクセシビリティを?qū)澫螭趣筏皮い蓼埂?「一時停止、停止、非表示」および「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広範なアニメーションを備えたサイトに堅牢なソリューションを提供します。

結(jié)論

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

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