accessible-motion

アクセシブルなモーションデザイン

ディズニーのアニメーションの12原則を取り入れながら、前庭障害、動きへの過敏さ、認知障害のあるユーザーにも配慮します。

クイックリファレンス

原則	アクセシブルな実装
伸縮	代わりに不透明度や色を変える
予備動作	動きを使わずに状態の変化を示す
演出	動きではなくフォーカスを管理する
ストレート・アヘッド／ポーズ・トゥ・ポーズ	状態を即座に切り替える
あと追い／オーバーラッピング	なくすか、最小限のフェードにする
スローイン／スローアウト	即時に切り替えるか、ごく穏やかなイージングにする
アーク	直線的な動き、または動かさない
副次的動作	減らすか、なくす
タイミング	即時（0ms）または長めの時間をかける
誇張	完全になくす
立体感のある描画	静止状態で視覚的に明瞭にする
魅力	個性よりも明瞭さを重視する

基本原則

アニメーションは理解を助けるものであり、決して妨げてはなりません。動きによって害が生じる場合は、機能を損なわない代替手段を用意します。

ユーザーの設定を尊重する

CSS メディアクエリ

/* Default: Full animation */
.element {
    transition: transform 300ms ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .element {
        transition: opacity 200ms ease-out;
        /* Or no transition at all */
        transition: none;
    }
}

JavaScript による検出

const prefersReducedMotion = window.matchMedia(
    '(prefers-reduced-motion: reduce)'
).matches;

if (prefersReducedMotion) {
    // Use instant transitions or subtle fades
} else {
    // Use full animations
}

原則の適用方法

伸縮 → 不透明度や色の変化に置き換えます。ボタンは押したときに縮めるのではなく、暗くできます。ローディングインジケーターは、跳ねさせる代わりに不透明度を変化させられます。

予備動作 → 静的なインジケーターを使います。アニメーションによる準備動作ではなく、ローディング状態をすぐに表示します。ホバー時には拡大せず、色を即座に変えます。

演出 → フォーカスの管理と視覚的な階層を使います。アニメーションでコンテンツを見せるのではなく、スクロールして表示します。動きで注意を引くのではなく、静的な強調表示を使います。

動きの種類 → トランジションの代わりに状態を即座に切り替えます。トグルスイッチはその場で切り替わります。モーダルは即座に表示されます。メニューはアニメーションなしで表示されます。

あと追い → なくします。要素は最終状態に即座に移行します。落ち着く動き、バウンド、オーバーシュートの効果は使いません。

イージング → 即時（0ms）にするか、最小限の移動距離で、ごく穏やかに長い時間（500ms以上）をかけます。動きを使う場合は、ゆっくり控えめにします。

アーク／軌道 → 動かす場合も直線的な動きだけにします。位置の変化よりも、不透明度のトランジションを優先します。円形や複雑な動きの軌道は使いません。

副次的動作 → 大幅に減らすか、なくします。1回の操作につき、明確なフィードバックを1つだけ返します。連鎖するアニメーションや、時間差で始まるアニメーションは使いません。

タイミング → 2つの方法があります。素早いフィードバックには即時（0ms）、穏やかに知覚できるようにするには長め（500ms以上）にします。気づくには速く、症状を引き起こすには遅い150〜400msの範囲は避けます。

誇張 → 完全になくします。視覚的なフィードバックは、文字どおりで、比例したものだけにします。オーバーシュート、バウンド、劇的な効果は使いません。

立体感のある描画 → 静止状態でも視覚的な明瞭さを保ちます。アニメーションがなくても機能するように設計します。十分なコントラストと明確な階層を確保します。

魅力 → 個性ではなく、明瞭さによって魅力を生み出します。シンプルで予測しやすい操作にし、インターフェースが安定しているという安心感をユーザーに与えます。

安全なモーションパターン

おおむね安全

• 不透明度のフェード（控えめにする）
• 色のトランジション
• 小さなスケールの変化（5%未満）
• 非常にゆっくりとした動き（500ms以上）
• 繰り返しのないアニメーション

有害となる可能性があるもの

• パララックススクロール
• 背景の動き
• ズームアニメーション
• 回転する要素
• 速い動きの繰り返し
• 大きく動く領域（ビューポートの1/4超）

常に避けるもの

• 自動再生する動画の背景
• 無限に繰り返すアニメーション
• 前庭系の症状を引き起こすパターン
• 点滅（発作のリスク）
• 急速なズームイン／ズームアウト

WCAG ガイドライン

WCAG 2.1 達成基準

2.3.3 インタラクションによるアニメーション（AAA） 操作によって発生する動きは、不可欠な場合を除き、無効にできる必要があります。

2.2.2 一時停止、停止、非表示（A） 5秒を超えて続く動くコンテンツは、一時停止できる必要があります。

2.3.1 3回の閃光（A） コンテンツを1秒間に3回を超えて点滅させてはいけません。

実装チェックリスト

• prefers-reduced-motion が全体で尊重されている
• すべてのアニメーションに、動きを抑えた代替手段または動きのない代替手段がある
• 5 秒を超える自動再生の動きがない
• ユーザーがあらゆるアニメーションを一時停止または停止できる
• コンテンツが 1 秒あたり 3 回を超えて点滅しない
• アニメーションがなくても、必要な機能が動作する
• 動きを伴わずにフォーカス状態が明確にわかる
• 動きを伴わずに読み込み状態が機能する
• 動きを伴わずにエラー状態が表示される
• フォームの検証が静的な表示でも使いやすい

テスト

1. OS の設定で動きを抑える設定を有効にします
2. すべての機能が動作することを確認します
3. すべての状態が明確に伝わることを確認します
4. 抑えるべき動きが残っていないことを確認します
5. スクリーンリーダーのユーザーでテストします
6. 可能であれば、前庭障害のあるユーザーで検証します