WCAG 2.2 ガイドライン「2.3.3 インタラクションによるアニメーション」Level AAA について
はじめに
WCAG 2.2の「2.3.3 インタラクションによるアニメーション」では、ユーザーの操作（例: クリックやホバー）によってトリガーされる動きのあるアニメーションを、無効にするオプションを提供することを求めています。ただし、そのアニメーションが機能や情報伝達に不可欠な場合を除きます。
この基準は、アニメーションが一部のユーザーにとって不快や混乱を引き起こすことを防ぎ、快適な操作環境を提供することを目的としています。
1. 基準の概要
要件
- インタラクションによってトリガーされるアニメーションを無効にできる。
- アニメーションが不可欠な場合（例: 機能の一部である場合）、この基準は適用されません。
2. 実装方法
a. CSSのprefers-reduced-motionメディアクエリを使用
アニメーションを減らすオプションの例
ユーザーのシステム設定で「動きを減らす」が有効になっている場合、アニメーションを無効化します。
HTML
<div class="animated-box">ホバーでアニメーション</div>
CSS
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
transition: transform 0.5s ease;
}
.animated-box:hover {
transform: scale(1.2);
}
/* 動きを減らす設定が有効な場合のスタイル */
@media (prefers-reduced-motion: reduce) {
.animated-box {
transition: none; /* アニメーションを無効化 */
}
}
この方法では、ユーザーの設定に基づいて動的な動きを減らします。
b. ユーザー設定によるアニメーションの無効化
アニメーションのオン/オフを切り替えるボタンを提供
HTML
<div id="interactiveBox" class="animated">クリックしてアニメーション</div>
<button id="toggleAnimation">アニメーションを無効化</button>
CSS
#interactiveBox {
width: 100px;
height: 100px;
background-color: green;
transition: transform 0.5s ease;
}
#interactiveBox.animated:active {
transform: rotate(45deg);
}
JavaScript
const toggleAnimationButton = document.getElementById('toggleAnimation');
const interactiveBox = document.getElementById('interactiveBox');
toggleAnimationButton.addEventListener('click', () => {
interactiveBox.classList.toggle('animated');
const isAnimated = interactiveBox.classList.contains('animated');
toggleAnimationButton.textContent = isAnimated
? 'アニメーションを無効化'
: 'アニメーションを有効化';
});
ユーザーがボタンをクリックして、アニメーションをオンまたはオフに切り替えることができます。
c. アニメーションが必須の場合の工夫
アニメーションが不可欠な場合でも、動きを減らすための工夫を取り入れます。
動きを減らしたアニメーションの例
- スクロールインディケーターのアニメーションを、動きではなく色や形の変化で示す。
HTML
<div id="essentialAnimation" class="reduced-motion">動きを最小限に</div>
CSS
#essentialAnimation {
width: 100px;
height: 100px;
background-color: orange;
animation: essentialMotion 2s infinite;
}
@keyframes essentialMotion {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
#essentialAnimation {
animation: none; /* アニメーションを完全に停止 */
}
}
3. よくある失敗例とその改善策
a. アニメーションの無効化オプションがない
失敗例
- ホバーやクリックで動く要素があり、ユーザーがその動きを無効にできない。
改善策
- ユーザー設定やCSSの
prefers-reduced-motionを使用して動きを制御。
b. 動きが速すぎて混乱を引き起こす
失敗例
@keyframes fastMotion {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(100px); }
}
.animated {
animation: fastMotion 0.2s infinite;
}
改善策
- アニメーション速度を遅くする、または
prefers-reduced-motionに対応する。
4. アクセシビリティのメリット
a. ユーザーの快適性向上
- 動きを減らすことで、動きに敏感なユーザー（例: めまい、視覚過敏）が快適に利用できます。
b. 制御可能な操作性
- ユーザーが自身のニーズに応じてアニメーションをオン/オフできるため、ストレスのない操作を提供します。
c. ユーザー体験の向上
- 動きの影響を最小限に抑え、すべてのユーザーにとって魅力的で安全なコンテンツを提供できます。
5. テスト方法
a. 手動テスト
- システム設定で「動きを減らす」を有効にし、アニメーションが無効になることを確認。
- アニメーションをオン/オフできるオプションが正しく機能することを確認。
b. 自動テストツール
- Lighthouseなどのツールで、
prefers-reduced-motionの実装を検証。
まとめ
WCAG 2.2の「2.3.3 インタラクションによるアニメーション」は、動きのあるアニメーションを無効化するオプションを提供することで、すべてのユーザーに快適な操作環境を提供することを目指しています。
実装ポイント
- CSSの
prefers-reduced-motionを活用して動きを減らす。 - ユーザーにアニメーションのオン/オフを切り替えるオプションを提供する。
- 動きが必要な場合でも、可能な限り控えめなアニメーションを使用する。
これにより、すべてのユーザーが安心してコンテンツを利用できるウェブ環境を構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。