WCAG 2.2の達成基準「2.3.3 インタラクションによるアニメーション」は、利用者の操作をきっかけに生じる不要な動きを止められるようにする基準です。
クリックやホバーなどに反応して要素が移動、回転、拡大する設計では、動きに敏感な利用者が操作を続けにくくなることがあります。
この達成基準はLevel AAAに位置づけられており、機能や情報伝達に不可欠な動きを例外としています。
WCAG 2.2全体の位置づけを確認したい場合は、基礎解説もあわせてご覧ください。
達成基準2.3.3が求めること
W3Cの達成基準2.3.3は、インタラクションによって始まるモーションアニメーションを無効にできるよう求めています。
ただし、そのアニメーションが機能または情報伝達に不可欠であり、適合する別の方法では置き換えられない場合は例外です。
- インタラクション：クリック、タップ、ホバー、フォーカス、スクロールなどの利用者による操作です。
- モーションアニメーション：状態の間に段階を加え、要素が動く、形が変わる、滑らかに移り変わるように見せる表現です。
- 無効にできる：不要な動きを表示しない設定または仕組みを利用者が選べる状態です。
- 不可欠：動きを取り除くと情報または機能が根本的に変わり、適合する別の方法では同じ目的を果たせない状態です。
この基準が対象とするのは、視覚的な変化のすべてではありません。
色や透明度だけが変わり、知覚される大きさ、形、位置が変わらない表現は、WCAGにおけるモーションアニメーションの定義から外れます。
対象になる動きの見分け方
| 操作と表現 | 2.3.3での確認 | 対応の考え方 |
|---|---|---|
| ホバーやフォーカスでボタンが拡大する | 大きさが滑らかに変わるため対象です | 動きを止めた静的な状態を用意します |
| クリックでカードが回転する | 操作で回転が始まるため対象です | 回転を使わずに内容を切り替えられるようにします |
| スクロールに合わせて背景と前景が別々に動く | スクロール操作に追加された動きが対象です | 追加の動きを止めても内容を読めるようにします |
| 色または透明度だけが変わる | 大きさ、形、位置が変わらなければモーションアニメーションには含まれません | ほかの達成基準も含めて視認性を確認します |
判定するときは、アニメーションという名称ではなく、利用者の操作によって知覚上の移動や変形が生じるかを確認します。
実装方法
不要な動きを初めから使わない
装飾や注意喚起だけを目的とする動きは、削除できないかを先に検討します。
動き自体を使わなければ、利用者が設定を探す必要もありません。
prefers-reduced-motionに対応する
prefers-reduced-motionは、OSやユーザーエージェントで選ばれた「動きを減らす」設定をCSSから参照するメディア特性です。
W3CのCSS技法C39では、この設定に応じて動きを抑える方法が十分な技法の一つとして示されています。
次の例は静的な状態を初期値にし、利用者が動きの低減を求めていない場合だけ拡大のトランジションを有効にします。
HTML
<button type='button' class='motion-button'>詳細を表示</button>CSS
.motion-button {
transform: none;
}
@media (prefers-reduced-motion: no-preference) {
.motion-button {
transition: transform 0.5s ease;
}
.motion-button:hover,
.motion-button:focus-visible {
transform: scale(1.1);
}
}この書き方なら、動きを減らす設定が有効な環境ではトランジションが追加されません。
サイト内に動きの設定を用意する
OSの設定とは別に、サイト内で不要な動きを止める選択肢を提供する方法もあります。
設定ボタンには現在の状態を伝え、キーボードでも操作できる標準のbutton要素を使います。
HTML
<button type='button' id='motionToggle' aria-pressed='false'>
動きを減らす
</button>JavaScript
const motionToggle = document.getElementById('motionToggle');
motionToggle.addEventListener('click', () => {
const reduced = document.body.classList.toggle('reduce-motion');
motionToggle.setAttribute('aria-pressed', String(reduced));
motionToggle.textContent = reduced
? '動きを元に戻す'
: '動きを減らす';
});CSS
.reduce-motion .motion-button {
transition: none;
transform: none;
}JavaScriptで始める動きも、W3CのJavaScript技法SCR40を参考に、prefers-reduced-motionまたはサイト内設定を確認してから実行します。
「不可欠」という例外の判断
「機能の一部だから」という説明だけでは、その動きが不可欠だとは判断できません。
次の順に検討すると、例外の範囲を広げすぎずに済みます。
- 動きを取り除くと、伝わる情報または利用できる機能が根本的に変わるかを確認します。
- 即時の表示切り替え、静的な表示、文章による説明などで同じ目的を果たせないかを検討します。
- 代替方法では目的を果たせない場合に限り、不可欠な理由を記録します。
W3Cの達成基準2.3.3解説も、不要な動きを避ける方法、停止する設定を用意する方法、利用環境の動き低減設定を使う方法を示しています。
よくある失敗
動きを遅くするだけで終える
速度を落とすだけでは、モーションアニメーションを無効にできる状態にはなりません。
必要なのは、対象となる不要な動きを表示しない選択肢です。
CSSだけを止めてJavaScriptの動きを残す
CSSのトランジションを止めても、JavaScriptで位置や大きさを変更する処理が残れば、ページ全体として不要な動きを抑えられません。
実装方式ごとではなく、操作によって始まる動きを画面単位で洗い出します。
設定ボタンの状態が分からない
ボタンの文言とaria-pressedを更新し、動きが現在有効なのか無効なのかを判断できるようにします。
すべての動きを不可欠と扱う
ブランド表現や見栄えを理由にした動きは、それだけで機能または情報伝達に不可欠とはなりません。
静的な表現で目的を保てる場合は、例外として扱わず停止できるようにします。
手動テストの手順
- クリック、タップ、ホバー、フォーカス、スクロールで始まる動きを一覧にします。
- OSまたはユーザーエージェントの「動きを減らす」設定を有効にします。
- 一覧にした操作を一つずつ実行し、不要なモーションアニメーションが抑えられることを確認します。
- サイト内の切り替え設定がある場合は、キーボードで操作し、表示と状態が正しく変わることを確認します。
- 残した動きについて、機能または情報伝達に不可欠な理由と、代替方法を採用できない理由を確認します。
- CSSとJavaScriptの両方で始まる動きを確認します。
この達成基準には、動きが不可欠かどうかという文脈上の判断が含まれます。
自動チェックだけで適合を決めず、自動チェックと手動確認を組み合わせたアクセシビリティチェックを行います。
実装チェックリスト
- 操作によって始まる移動、回転、拡大、縮小を洗い出した
- 不要な動きを削除した
prefers-reduced-motionまたはサイト内設定で不要な動きを停止できる- CSSとJavaScriptの両方を確認した
- 設定ボタンをキーボードで操作でき、現在の状態が分かる
- 不可欠として残す動きの理由を説明できる
- 動きを止めても情報と機能を利用できる
達成基準2.3.3への対応は、アニメーションを一律に禁止する作業ではありません。
利用者の操作に不要な動きを重ねず、必要な場合にも停止できる経路を用意する設計です。
関連する発作リスクや自動再生を含めて確認する場合は、モーションとアニメーションのアクセシビリティもご覧ください。
ウェブアクセシビリティの導入を検討する方へ
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
アクセシビリティ向上にご興味がある方は、サービスの詳細をご覧ください。