accessibility-issues

アクセシビリティの問題

ディズニーの原則を慎重に取り入れて、誰もが使いやすいアニメーションを作成しましょう。

問題の兆候

• 動きによる吐き気の訴え
• 前庭障害を引き起こす
• スクリーンリーダーの混乱
• 認知的な過負荷
• 発作のリスク（点滅）
• アニメーション中にキーボードフォーカスが失われる

原則ごとの診断

つぶしと伸ばし

問題: 過剰な変形により方向感覚が失われます 修正: prefers-reduced-motion を設定しているユーザーには、つぶしと伸ばしを減らすか、なくします。代わりに不透明度を変化させます。

副次的な動き

問題: 動く要素が多すぎます 修正: 一度にアニメーション化する要素を1つに制限します。副次的な動きは控えめにするか、なくします。

誇張

問題: 大げさな動きが前庭反応を引き起こします 修正: 拡大縮小、回転、位置の変化を減らします。動きは小さく、予測可能な範囲に保ちます。

タイミング

問題: アニメーションが速すぎる、または遅すぎます 修正: 一貫性があり、予測しやすいタイミングにします。急激な速度変化は避けます。

弧を描く動き

問題: 曲線的な動きの軌跡により、追跡が難しくなります 修正: UI に不可欠な動きには直線的な動きを使います。弧を描く動きは任意の装飾要素に限ります。

すぐにできる修正

1. prefers-reduced-motion を尊重する - 必ず設定を確認して反映します
2. 自動再生のアニメーションを使わない - ユーザーが動きを開始できるようにします
3. フォーカスを常に見える状態にする - フォーカスインジケーターをアニメーションで消さないでください
4. 変更を通知する - 動的なコンテンツには ARIA ライブリージョンを使います
5. 一時停止コントロールを用意する - ループするアニメーションには必ず用意します

トラブルシューティングのチェックリスト

• アニメーションは prefers-reduced-motion を尊重していますか？
• アニメーションを一時停止または停止する方法はありますか？
• 状態の変化はスクリーンリーダーに通知されますか？
• キーボードフォーカスは見やすく、論理的な位置に保たれていますか？
• 点滅の頻度は1秒あたり3回未満ですか？
• ユーザーはアニメーションなしでタスクを完了できますか？
• アニメーションは自動再生ではなく、ユーザーの操作によって開始されますか？
• スクリーンリーダーを有効にしてテストしていますか？

コードパターン

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// Check preference in JS
const prefersReducedMotion = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;