コンテンツに移動
Silktideヘルプ

インタラクションによるアニメーション

Silktide は、ユーザーのインタラクションによって開始される動きのあるアニメーション(スクロールによるパララックス、ホバー時の変形、クリック時のトランジションなど)を、動きが本質的なものでない限り停止できることを確認するよう促します。これは 達成基準 2.3.3(レベル AAA)です。

これは です。動きが本質的かどうか、切り替えコントロールが存在するか、prefers-reduced-motion が正しく設定されているかを判断するには、ページを操作する人が必要です。Silktide は各ページでプロンプトを表示し、人が確認します。

これが重要な理由

スクロール、ホバー、クリックによって開始される動きは、動きに敏感な人に、めまい、吐き気、片頭痛などの前庭障害を引き起こす可能性があります。オペレーティングシステムには、まさにこの理由から「視差効果を減らす」設定が用意されています。これを無視するサイトは、そのようなユーザーに動きに耐えるか、ページを離れるかを強いることになります。

これは 一時停止、停止、非表示(2.2.2)とは異なります。2.2.2 は ページ が自動的に開始するアニメーションを対象とします。2.3.3 は ユーザー が開始するアニメーションを対象とします。

チェックする内容

  1. ページを操作します。スクロール、ホバー、フォーカス、クリックを行い、コンテンツを空間内で移動させる動き(パララックス、スライドイン、跳ねる動き、ページめくりのトランジションなど)がないか確認します。単純な不透明度のフェードは対象外です。
  2. オペレーティングシステムの視差効果を減らす設定を有効にする(またはブラウザーの DevTools で prefers-reduced-motion: reduce をエミュレートする)と、もう一度確認します。本質的でない動きは停止する必要があります。
  3. サイトが OS の設定に対応していない場合は、本質的でないアニメーションを無効にするページ内のコントロールを探します。正常に動作し、コンテンツを非表示にしないことを確認します。
  4. 機能に不可欠な動き(読み込み中のスピナー、プログレスバー、アニメーション作成のプレビューなど)は対象外です。承認する際に、その判断を記録してください。

修正方法

  • CSS と JavaScript で prefers-reduced-motion に対応することを優先します(WCAG の達成方法 C39 および SCR40)。
  • または、インタラクションによって開始される本質的でない動きを無効にする、サイト全体のコントロールを提供します。
  • より単純な効果で十分な場合は、パララックスや大きな空間的トランジションを避けます。

ページにインタラクションによって開始される動きがない場合、またはそのような動きをすべて無効にできる場合(もしくは動きが本質的な場合)は、この検出結果を してください。

Silktide によるテスト方法

Silktide は静的なクロールでは時間経過による動きを観察できないため、このチェックでは各ページにつき、確認すべき内容を説明するレビュー用プロンプトを 1 つ表示します。2.3.3 を自動化する主要なツールはありません。W3C ACT ルールも存在せず、axe も Siteimprove もこのチェックを提供していません。

詳細情報

最終更新

このページは役に立ちましたか?

インタラクションによるアニメーション | Silktide ヘルプ