elite-accessibility

エリートアクセシビリティ

動きの多いウェブサイトを、誰もが利用できるようにします。

クイックリファレンス

トピック	リファレンスファイル
動きを抑える設定	reduced-motion.md
WCAG コントラスト	wcag-contrast.md
フォーカスとキーボード	focus-keyboard.md
インクルーシブな美しさ	inclusive-aesthetics.md
タッチ操作	touch-interaction.md

---

なぜ重要なのか

動きは実際に害をもたらすことがあります。

• 前庭障害は、40 歳以上の成人の約 35％に影響します
• 動きへの過敏性は、吐き気、めまい、片頭痛を引き起こすことがあります
• 認知的な過負荷 — アニメーションは、ADHD や不安症のあるユーザーの気を散らすことがあります
• 発作のリスク — 点滅するコンテンツは、光感受性てんかんを引き起こすことがあります

アクセシビリティは任意ではなく、デザイン要件です。

---

基本原則

すべてのアニメーションには、必ず prefers-reduced-motion に対応する代替手段を用意します。

優れたウェブデザインにおいて、これは譲れない条件です。

---

実装の概要

CSS の方法

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

GSAP の方法

// ALWAYS use gsap.matchMedia() for motion preferences
const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  // Full animations for users who want them
  gsap.from(".hero-content", {
    opacity: 0,
    y: 50,
    duration: 1,
    stagger: 0.2,
  });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  // Instant state for users who prefer reduced motion
  gsap.set(".hero-content", { opacity: 1, y: 0 });
});

CSS スクロール駆動アニメーション

/* Only enable scroll animations if motion is OK */
@media (prefers-reduced-motion: no-preference) {
  .scroll-animated {
    animation: reveal linear;
    animation-timeline: scroll();
  }
}

/* Fallback: just show the content */
@media (prefers-reduced-motion: reduce) {
  .scroll-animated {
    opacity: 1;
    transform: none;
  }
}

---

代わりに提供するもの

アニメーションを無効にするだけではなく、代替手段を提供します。

通常のアニメーション	動きを抑える設定での代替手段
横からスライドして表示	即座に表示、またはフェードのみ
視差スクロール	固定位置に配置
スクロールに応じた表示	初期状態からコンテンツを表示
バウンス／パルス	静止、またはわずかな不透明度の変化
ページ遷移	即座に移動
自動再生カルーセル	スライドを固定し、手動操作を可能にする

例：表示アニメーション

const mm = gsap.matchMedia();

// Full experience
mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".card", {
    opacity: 0,
    y: 30,
    duration: 0.6,
    stagger: 0.1,
    scrollTrigger: {
      trigger: ".cards-section",
      start: "top 80%",
    },
  });
});

// Reduced motion: simple fade, no movement
mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.from(".card", {
    opacity: 0,
    duration: 0.3, // Shorter
    stagger: 0.05, // Faster stagger
    scrollTrigger: {
      trigger: ".cards-section",
      start: "top 80%",
    },
  });
});

---

アニメーションのガイドライン

安全なアニメーション（通常は問題ありません）

• 不透明度の変化（フェードイン／アウト）
• 小さな拡大・縮小（0.95 → 1）
• 色の遷移
• 短い再生時間（300ms 未満）

問題のあるアニメーション（代替手段が必要です）

• 大きな動き（スライド、飛び出し）
• 視差効果
• ズーム（拡大／縮小）
• 回転
• バウンス／パルス
• 無限ループ

危険なアニメーション（避けるか、厳重に制限してください）

• 点滅／ストロボ（発作を引き起こすことがあります）
• 素早い動き
• 動きを伴う動画の自動再生
• 回転する要素

---

動きを抑える設定のテスト

macOS

システム設定 → アクセシビリティ → ディスプレイ → 視差効果を減らす

Windows

設定 → コンピューターの簡単操作 → ディスプレイ → Windows のアニメーションを表示する（オフ）

iOS

設定 → アクセシビリティ → 動作 → 視差効果を減らす

Chrome DevTools

1. DevTools を開きます（F12）
2. Cmd/Ctrl + Shift + P → 「Render」
3. 「Emulate CSS media feature prefers-reduced-motion」を探します

---

コントラストのクイックリファレンス

WCAG の要件

コンテンツ	AA（最小）	AAA（強化）
通常のテキスト	4.5:1	7:1
大きなテキスト（18px 以上）	3:1	4.5:1
UI コンポーネント	3:1	3:1
フォーカスインジケーター	3:1	3:1

簡易テスト

ブラウザー拡張機能を使用します。

• axe DevTools
• WAVE
• Stark

詳しいガイダンスについては、wcag-contrast.mdを参照してください。

---

フォーカス状態

すべてのインタラクティブな要素には、視認できるフォーカス表示が必要です。

/* Base focus style */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default, add custom */
button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

キーボードナビゲーションのパターンについては、focus-keyboard.mdを参照してください。

---

スクリーンリーダーに関する考慮事項

装飾的なアニメーションを非表示にする

<div class="animated-background" aria-hidden="true"></div>


<div class="animated-card" role="article">
  
</div>

動的なコンテンツを通知する

<div aria-live="polite" aria-atomic="true">
  <p>Loading complete. Showing 12 results.</p>
</div>

---

実装チェックリスト

すべてのアニメーションで必須：

• prefers-reduced-motion を確認する
• モーションを軽減またはなくした代替手段を用意する
• 1 秒間に 3 回を超えて点滅させない
• ユーザーが操作できない状態で無限に自動再生しない
• 読書を妨げるレイアウトシフトを発生させない

すべてのページで必須：

• WCAG AA のコントラスト比に適合する（テキストは 4.5:1）
• フォーカス状態を視覚的に表示する
• キーボードで操作できる
• JavaScript のアニメーションがなくても動作する
• キーボードユーザー向けのスキップリンクを設ける

---

リソース

• MDN：prefers-reduced-motion
• WCAG 2.1 ガイドライン
• A11y Project
• インクルーシブデザインの原則