Webアクセシビリティ超入門【2025年版】：今日からできるWCAG 2.2対応チェックリスト

まず押さえること（最短5箇条）

1. コントラスト比 4.5:1 以上（本文）を守る
2. すべての画像に代替テキスト（意図がない装飾は空alt）
3. 見出し階層（h1→h2→h3…）を崩さない
4. キーボードだけで操作可能に（タブ移動、フォーカス可視）
5. フォーム要素にラベルとエラーメッセージを関連付け

色とコントラスト

/* フォーカスは誰にでも見えるように */
:where(a, button, input, textarea):focus-visible {
  outline: 2px solid #1a73e8; /* 高コントラスト色 */
  outline-offset: 2px;
}

チェックポイント: 本文 4.5:1、見出し/大きな文字 3:1。背景色と文字色はツールで実測。

画像と代替テキスト

<!-- 内容を伝える画像：altで意味を記述 -->
<img src="/chart.png" alt="2025年の月次売上の折れ線グラフ" />

<!-- 装飾のみ：空altでスクリーンリーダーから除外 -->
<img src="/divider.png" alt="" role="presentation" />

見出しとランドマーク

<header>…</header>
<main>
  <h1>記事タイトル</h1>
  <h2>セクション</h2>
  <h3>小見出し</h3>
</main>
<footer>…</footer>

ランドマーク（header/main/nav/footer）でページ構造を明確化。

キーボード操作とフォーカス管理

// モーダル例：Escで閉じる、フォーカストラップ
useEffect(() => {
  function onKey(e: KeyboardEvent) { if (e.key === 'Escape') close(); }
  document.addEventListener('keydown', onKey);
  return () => document.removeEventListener('keydown', onKey);
}, []);

タブ順序を壊す tabindex の乱用は禁止。表示順とフォーカス順を一致させる。

フォームのラベルとエラー

<label for="email">メールアドレス</label>
<input id="email" name="email" type="email" aria-describedby="email-help email-error" />
<div id="email-help">会社ドメインのメールを推奨</div>
<div id="email-error" role="alert">メール形式が正しくありません</div>

エラー表示は role="alert" で即時に通知。

動的更新とライブリージョン

<div aria-live="polite" id="status">読み込み中…</div>

重要度が高い通知は assertive。過剰な読み上げは避ける。

すぐ使えるチェックリスト（抜粋）

• 画像のaltが適切で、装飾は空alt
• 文字サイズとコントラストが十分
• フォーカスインジケータが常に可視
• キーボードのみで全機能を操作可能
• フォームにラベル/ヘルプ/エラーの関連づけ
• 見出し階層とランドマークが正しい

まとめ

まずは「見える・読める・操作できる」の3点から。小さな修正の積み重ねで、多くのユーザーの体験を改善できます。