アクセシビリティ (a11y)

WCAG 2.2 と Lighthouse アクセシビリティ監査に基づいた包括的なアクセシビリティ ガイドライン。目的：障害者を含むすべてのユーザーがコンテンツを使用できるようにすること。

WCAG 原則: POUR

原則	説明
Perceivable (知覚可能)	コンテンツはさまざまな感覚を通じて認識できる
Operable (操作可能)	インターフェースはすべてのユーザーが操作できる
Understandable (理解可能)	コンテンツとインターフェースが理解しやすい
Robust (堅牢)	コンテンツが支援技術に対応している

適合レベル

レベル	要件	目標
A	最小限のアクセシビリティ	必須
AA	標準的な適合	推奨 (多くの管轄区域で法的要件)
AAA	拡張アクセシビリティ	あると良い

---

知覚可能

テキスト代替 (1.1)

画像には alt テキストが必須:

<!-- ❌ alt がない -->
<img src="chart.png">

<!-- ✅ 説明的な alt -->
<img src="chart.png" alt="Q3 の売上が 40% 増加したことを示す棒グラフ">

<!-- ✅ 装飾的な画像 (空の alt) -->
<img src="decorative-border.png" alt="" role="presentation">

<!-- ✅ 複雑な画像と長い説明 -->
<figure>
  <img src="infographic.png" alt="2024 年市場トレンド インフォグラフィック" 
       aria-describedby="infographic-desc">
  <figcaption id="infographic-desc">
    <!-- 詳細な説明 -->
  </figcaption>
</figure>

アイコンボタンはアクセシブルな名前が必須:

<!-- ❌ アクセシブルな名前がない -->
<button><svg><!-- メニューアイコン --></svg></button>

<!-- ✅ aria-label を使用 -->
<button aria-label="メニューを開く">
  <svg aria-hidden="true"><!-- メニューアイコン --></svg>
</button>

<!-- ✅ 視覚的に非表示のテキストを使用 -->
<button>
  <svg aria-hidden="true"><!-- メニューアイコン --></svg>
  <span class="visually-hidden">メニューを開く</span>
</button>

視覚的に非表示のクラス:

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

色のコントラスト (1.4.3, 1.4.6)

テキストサイズ	AA 最小値	AAA 強化
通常テキスト (< 18px / < 14px 太字)	4.5:1	7:1
大きいテキスト (≥ 18px / ≥ 14px 太字)	3:1	4.5:1
UI コンポーネント & グラフィックス	3:1	3:1

/* ❌ コントラスト不足 (2.5:1) */
.low-contrast {
  color: #999;
  background: #fff;
}

/* ✅ 十分なコントラスト (7:1) */
.high-contrast {
  color: #333;
  background: #fff;
}

/* ✅ フォーカス状態にもコントラストが必要 (背景比 3:1、WCAG 1.4.11) */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

色だけに頼らないこと:

<!-- ❌ 色だけがエラーを示す -->
<input class="error-border">
<style>.error-border { border-color: red; }</style>

<!-- ✅ 色 + アイコン + テキスト -->
<div class="field-error">
  <input aria-invalid="true" aria-describedby="email-error">
  <span id="email-error" class="error-message">
    <svg aria-hidden="true"><!-- エラーアイコン --></svg>
    有効なメール アドレスを入力してください
  </span>
</div>

メディアの代替 (1.2)

<!-- 字幕付きビデオ -->
<video controls>
  <source src="video.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
  <track kind="descriptions" src="descriptions.vtt" srclang="en" label="Descriptions">
</video>

<!-- トランスクリプト付きオーディオ -->
<audio controls>
  <source src="podcast.mp3" type="audio/mp3">
</audio>
<details>
  <summary>トランスクリプト</summary>
  <p>完全なトランスクリプト テキスト...</p>
</details>

---

操作可能

キーボード アクセシブル (2.1)

すべての機能がキーボードでアクセスできる必要があります。 ネイティブなインタラクティブ要素 — <button>、<a href>、フォーム コントロール — を使用することをお勧めします。これらは Enter/Space アクティベーション、フォーカス、および支援技術のセマンティクスを自動的に処理します。ネイティブ要素を使用できない場合のみ、手動キーボード処理を追加してください。

<!-- ❌ インタラクティブでない要素でクリックのみ: フォーカス不可、キーボード アクティベーションなし -->
<div class="card" onclick="handleAction()">開く</div>

<!-- ✅ ベスト: ネイティブ button を使用 -->
<button type="button" onclick="handleAction()">開く</button>

// ✅ インタラクティブでない要素を使用する必要がある場合 (例: role="button" を持つ div)、
// フォーカス可能にしてキーボード アクティベーションを処理します。
// ネイティブ <button> に これを追加しないでください — Enter/Space は既にクリックを発火させるため、
// ダブル トリガーが発生します。
element.setAttribute('role', 'button');
element.setAttribute('tabindex', '0');
element.addEventListener('click', handleAction);
element.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault();
    handleAction();
  }
});

キーボード トラップなし。 ユーザーはすべてのコンポーネントにタブで入出できる必要があります。ダイアログには モーダル フォーカス トラップ パターン を使用してください — ネイティブ <dialog> 要素がこれを自動的に処理します。

フォーカス表示 (2.4.7)

/* ❌ フォーカス アウトラインを削除しないこと */
*:focus { outline: none; }

/* ✅ キーボードのみのフォーカスに :focus-visible を使用 */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid currentColor; /* テキスト色を継承 → 既にコントラスト確認済み */
  outline-offset: 2px;
}

/* ✅ または、ブランド色を選択し、すべての背景に対して ≥3:1 のコントラストを確認 */
button:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 95, 204, 0.5);
}

フォーカスが隠されない (2.4.11) — 2.2 で新規

要素がキーボード フォーカスを受け取るとき、スティッキー ヘッダー、フッター、重複するパネルなどの作成者が作成したコンテンツで完全に隠されてはいけません。レベル AAA (2.4.12) では、フォーカスされた要素のどの部分も隠されないようにしてください。

/* ✅ フォーカスされた要素にスクロールするときはスティッキー ヘッダーを考慮 */
:target {
  scroll-margin-top: 80px;
}

/* ✅ フォーカスされた項目が固定/スティッキー バーをクリアするようにする */
:focus {
  scroll-margin-top: 80px;
  scroll-margin-bottom: 60px;
}

スキップ リンク (2.4.1)

キーボード ユーザーが反復的なナビゲーションをバイパスできるようにスキップ リンクを提供してください。完全なマークアップとスタイルについては、スキップ リンク パターン を参照してください。

ターゲット サイズ (2.5.8) — 2.2 で新規

インタラクティブ ターゲットは最小でも 24 × 24 CSS ピクセル (AA) である必要があります。例外: インライン テキスト リンク、ブラウザがサイズを制御する要素、および 24px の円をバウンディング ボックスの中央に配置しても別のターゲットと重ならないターゲット。

/* ✅ 最小ターゲット サイズ */
button,
[role="button"],
input[type="checkbox"] + label,
input[type="radio"] + label {
  min-width: 24px;
  min-height: 24px;
}

/* ✅ 快適なターゲット サイズ (推奨 44×44) */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

ドラッグ操作 (2.5.7) — 2.2 で新規

ドラッグを必要とするアクション には、単一ポインター代替案 (ボタン、入力など) が必要です。ソート可能なリスト の例については、ドラッグ操作パターン を参照してください。

タイミング (2.2)

// ユーザーが時間制限を延長できるようにする
function showSessionWarning() {
  const modal = createModal({
    title: 'セッション有効期限切れ',
    content: 'セッションは 2 分後に有効期限が切れます。',
    actions: [
      { label: 'セッションを延長', action: extendSession },
      { label: 'ログアウト', action: logout }
    ],
    timeout: 120000
  });
}

モーション (2.3)

/* 動きの低減設定を尊重 */
@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;
  }
}

---

理解可能

ページ言語 (3.1.1)

<!-- ❌ 言語が指定されていない -->
<html>

<!-- ✅ 言語が指定されている -->
<html lang="en">

<!-- ✅ ページ内の言語変更 -->
<p>The French word for hello is <span lang="fr">bonjour</span>.</p>

一貫したナビゲーション (3.2.3)

<!-- ナビゲーションはページ全体で一貫性があるべき -->
<nav aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">ホーム</a></li>
    <li><a href="/products">商品</a></li>
    <li><a href="/about">概要</a></li>
  </ul>
</nav>

一貫したヘルプ (3.2.6) — 2.2 で新規

ヘルプ メカニズム (連絡先情報、チャット ウィジェット、FAQ リンク、セルフサービス オプション) が複数のページで繰り返される場合、毎回同じ相対的な順序で表示される必要があります。一貫した配置に頼るユーザーは、すべてのページでヘルプを探す必要がありません。

フォーム ラベル (3.3.2)

すべての入力にはプログラムで関連付けられたラベルが必要です。明示的、暗黙的、および指示的の例については、フォーム ラベル パターン を参照してください。

エラー処理 (3.3.1, 3.3.3)

role="alert" または aria-live を使用してスクリーン リーダーにエラーをアナウンスし、無効なフィールドに aria-invalid="true" を設定し、送信時に最初のエラーにフォーカスします。完全なマークアップと JS については、エラー処理パターン を参照してください。

重複した入力 (3.3.7) — 2.2 で新規

ユーザーが同じセッション内で既に提供した情報を再入力させないでください。以前のステップから自動入力するか、以前に入力した値から選択できるようにします。例外: セキュリティの再確認とコンテンツの有効期限切れ。

<!-- ✅ 請求先住所から配送先住所を自動入力 -->
<fieldset>
  <legend>配送先住所</legend>
  <label>
    <input type="checkbox" id="same-as-billing" checked>
    請求先住所と同じ
  </label>
  <!-- チェック時にフィールドが自動入力される -->
</fieldset>

アクセシブルな認証 (3.3.8) — 2.2 で新規

ログイン フローは認知機能テスト (パスワードの記憶、パズルの解決など) に依存してはいけません。ただし、以下のいずれか 1 つが当てはまる場合を除きます:

• コピーペーストまたは自動入力メカニズムが利用可能
• 代替方法が存在する (パスキー、SSO、メール リンク など)
• テストでオブジェクト認識または個人コンテンツを使用 (AA のみ; AAA はこの例外を削除)

<!-- ✅ パスワード フィールドでペーストを許可 -->
<input type="password" id="password" autocomplete="current-password">

<!-- ✅ パスワード不要のオプションを提供 -->
<button type="button">パスキーでサインイン</button>
<button type="button">ログイン リンクをメール送信</button>

---

堅牢

ARIA 使用法 (4.1.2)

ネイティブ要素を優先:

<!-- ❌ div の ARIA ロール -->
<div role="button" tabindex="0">クリック</div>

<!-- ✅ ネイティブ button -->
<button>クリック</button>

<!-- ❌ ARIA チェックボックス -->
<div role="checkbox" aria-checked="false">オプション</div>

<!-- ✅ ネイティブ チェックボックス -->
<label><input type="checkbox"> オプション</label>

ARIA が必要な場合は、 正しいロールと状態を使用してください。完全な tablist の例については、ARIA タブ パターン を参照してください。

ライブ リージョン (4.1.3)

aria-live リージョンを使用して、フォーカスを移動せずに動的コンテンツの変更をアナウンスしてください。マークアップと showNotification() ヘルパーについては、ライブ リージョン パターン を参照してください。

---

テスト チェックリスト

自動テスト

# Lighthouse アクセシビリティ監査
npx lighthouse https://example.com --only-categories=accessibility

# axe-core
npm install @axe-core/cli -g
axe https://example.com

手動テスト

• キーボード ナビゲーション: ページ全体をタブで移動し、Enter/Space でアクティベーション
• スクリーン リーダー: VoiceOver (Mac)、NVDA (Windows)、TalkBack (Android) でテスト
• ズーム: 200% ズーム時にコンテンツが使用可能
• 高コントラスト: Windows 高コントラスト モードでテスト
• 動きの低減: prefers-reduced-motion: reduce でテスト
• フォーカス順: 論理的で視覚的な順序に従う
• ターゲット サイズ: インタラクティブ要素が 24×24px 最小値を満たしている

VoiceOver と NVDA のショートカットについては、スクリーン リーダー コマンド リファレンス を参照してください。

---

影響度別の一般的な問題

重大 (すぐに修正)

1. フォーム ラベルの欠落
2. 画像 alt テキストの欠落
3. 色のコントラスト不足
4. キーボード トラップ
5. フォーカス インジケーターなし

深刻 (ローンチ前に修正)

1. ページ言語の欠落
2. 見出し構造の欠落
3. 説明的でないリンク テキスト
4. 自動再生メディア
5. スキップ リンクの欠落

中程度 (すぐに修正)

1. アイコンの ARIA ラベルの欠落
2. ナビゲーションの不一貫性
3. エラー識別の欠落
4. コントロール なしのタイミング
5. ランドマーク リージョンの欠落

参考資料

• WCAG 2.2 クイック リファレンス
• WAI-ARIA オーサリング プラクティス
• Deque axe ルール
• Web Quality Audit
• WCAG criteria reference
• アクセシビリティ コード パターン