Webアクセシビリティ WCAG 2.2 完全対応ガイド｜実装チェックリスト付き【2026年版】

Web アクセシビリティ（a11y）は、高齢者・障害を持つ方を含む全ての利用者が Web サービスを使えるようにする取り組みです。2023年10月に WCAG 2.2 が W3C 勧告として発行され、2026年現在ではこれが最新の国際標準となっています。本記事では、実装すべき対応項目を優先度付きで解説します。

WCAG 2.2 の4つの原則

WCAG は 4 つの基本原則（POUR）で構成されます。

1. Perceivable（知覚可能）: 情報はユーザーが知覚できる方法で提供する
2. Operable（操作可能）: UI とナビゲーションは操作可能である
3. Understandable（理解可能）: 情報と UI の操作方法は理解可能である
4. Robust（堅牢）: 多様な支援技術で解釈可能である

各原則の下に「達成基準」があり、**A（最低限）・AA（標準）・AAA（最高）**の3段階に分かれます。民間サービスは AA レベルを目標にするのが一般的です。

WCAG 2.2 の新規追加項目（9項目）

WCAG 2.1 から追加された新基準を先に押さえておきましょう。

項目	レベル	内容
2.4.11 Focus Not Obscured (Minimum)	AA	フォーカス中の要素が他の要素で隠れない
2.4.12 Focus Not Obscured (Enhanced)	AAA	フォーカス中の要素が完全に見える
2.4.13 Focus Appearance	AAA	フォーカスインジケーターの視認性
2.5.7 Dragging Movements	AA	ドラッグ操作の代替手段
2.5.8 Target Size (Minimum)	AA	タップターゲット 24x24px 以上
3.2.6 Consistent Help	A	ヘルプ機能の配置が一貫している
3.3.7 Redundant Entry	A	同じ情報の再入力を求めない
3.3.8 Accessible Authentication (Minimum)	AA	認証プロセスの簡易化
3.3.9 Accessible Authentication (Enhanced)	AAA	パスワードレス認証等

セマンティックHTMLの徹底

アクセシビリティの基本は適切な HTML タグを使うことです。

悪い例

<div onclick="navigate()">ホーム</div>
<div class="heading">タイトル</div>
<div class="list">
  <div>項目1</div>
  <div>項目2</div>
</div>

良い例

<a href="/">ホーム</a>
<h1>タイトル</h1>
<ul>
  <li>項目1</li>
  <li>項目2</li>
</ul>

<a> <button> <h1>〜<h6> <ul> <nav> <main> <article> <aside> <footer> など、意味に応じた要素を使いましょう。スクリーンリーダーは HTML の意味を読み取って動作します。

見出し階層の正しい使い方

h1 → h2 → h3 と段階的に下げ、飛ばしたりしないのが原則です。

良い構造

<h1>記事タイトル</h1>
<h2>セクション1</h2>
<h3>サブセクション</h3>
<h2>セクション2</h2>

悪い構造

<h1>記事タイトル</h1>
<h4>いきなりh4</h4> <!-- 階層を飛ばしている -->
<h2>戻ってh2</h2>

<h1> は 1 ページに 1 つが原則です。視覚的なフォントサイズは CSS で調整しましょう。

画像の alt 属性

すべての画像には alt 属性が必須です。

内容を伝える画像

<img src="chart.png" alt="2026年第1四半期の売上グラフ。1月100万円、2月120万円、3月150万円" />

装飾目的の画像

<img src="decoration.svg" alt="" role="presentation" />

装飾画像には 空の alt (alt="") を指定します。alt 属性を省略すると、スクリーンリーダーが src を読み上げてしまうため NG です。

複雑な画像

<figure>
  <img src="infographic.png" alt="詳細は下記説明を参照" />
  <figcaption>
    このインフォグラフィックは... （詳細な説明）
  </figcaption>
</figure>

色のコントラスト比

WCAG AA レベルでは以下の比率が必要です。

要素	最低コントラスト比
通常のテキスト	4.5:1
大きいテキスト（18pt以上）	3:1
UI コンポーネント、グラフィック	3:1

チェックツール:

• WebAIM Contrast Checker
• Chrome DevTools の「Issues」パネル
• Lighthouse

例

/* 悪い例: コントラスト比 2.8:1 */
.text { color: #888; background: #fff; }

/* 良い例: コントラスト比 5.7:1 */
.text { color: #5a5a5a; background: #fff; }

キーボード操作対応

マウスなしで全ての機能が使えるべきです。

Tab キーでフォーカス移動

• すべてのインタラクティブ要素がフォーカス可能
• フォーカス順序が論理的（上から下、左から右）
• フォーカスが見える（アウトライン表示）

/* フォーカスアウトラインは消さない */
:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
}

/* outline: none は使わない（または代替を用意する） */

スキップリンク

ページ先頭に「メインコンテンツへスキップ」リンクを配置:

<a href="#main" class="skip-link">メインコンテンツへスキップ</a>

<nav>...</nav>
<main id="main">...</main>

.skip-link {
  position: absolute;
  top: -40px;
}
.skip-link:focus {
  top: 0;
}

ARIA 属性の使い方

ARIA は HTML で表現しきれない意味を補完します。**しかし原則は「ARIA より HTML」**です。不必要に ARIA を使うべきではありません。

よく使う ARIA 属性

<!-- ボタンの状態 -->
<button aria-expanded="false" aria-controls="menu">
  メニュー
</button>
<ul id="menu" hidden>...</ul>

<!-- ラベル -->
<button aria-label="閉じる">×</button>

<!-- ランドマーク -->
<nav aria-label="メインナビゲーション">...</nav>
<nav aria-label="パンくずリスト">...</nav>

<!-- ライブリージョン -->
<div aria-live="polite" role="status">
  保存しました
</div>

aria-live の使い分け

値	用途
off	読み上げない（デフォルト）
polite	現在の読み上げが終わってから通知
assertive	即座に通知（緊急時のみ）

フォームのアクセシビリティ

正しいラベル付け

<!-- 良い: label と input が紐付いている -->
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email" required />

<!-- 良い: ラベルで囲む形 -->
<label>
  メールアドレス
  <input type="email" name="email" required />
</label>

エラーメッセージの関連付け

<label for="password">パスワード</label>
<input
  type="password"
  id="password"
  aria-describedby="password-error"
  aria-invalid="true"
/>
<p id="password-error" class="error">
  パスワードは 8 文字以上必要です
</p>

タップターゲットサイズ（WCAG 2.2 新基準）

スマートフォンでのタップミスを防ぐため、最小 24x24px が推奨されます。

/* タップ可能な要素の最小サイズ */
button, a, .tappable {
  min-width: 24px;
  min-height: 24px;
  padding: 8px; /* 実質 40x40px 以上に */
}

Apple の Human Interface Guidelines では 44x44px が推奨されています。

動画・音声コンテンツ

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track
    kind="captions"
    src="captions-ja.vtt"
    srclang="ja"
    label="日本語字幕"
    default
  />
  <track
    kind="descriptions"
    src="descriptions-ja.vtt"
    srclang="ja"
    label="音声解説"
  />
</video>

字幕と音声解説を提供することで、聴覚・視覚に障害がある方も動画を楽しめます。

モーション制御

視差効果や不要なアニメーションは、一部ユーザーに不快感を与えます。

@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;
  }
}

テストツール

ツール	用途
axe DevTools (Chrome拡張)	自動アクセシビリティチェック
WAVE	Webページ全体のa11y評価
Lighthouse	Accessibility スコア
NVDA (Windows)	スクリーンリーダー動作確認
VoiceOver (Mac)	スクリーンリーダー動作確認

自動ツールは全ての問題を見つけられません。実際にキーボードとスクリーンリーダーで使ってみることが最も重要です。

実装チェックリスト

必須項目（すぐ確認）:

• すべての画像に alt 属性
• 見出し階層が論理的
• キーボードで全機能が操作可能
• フォーカスインジケーターが見える
• 色コントラスト比 4.5:1 以上
• フォームにラベル
• lang="ja" 属性
• スキップリンク

AA レベル（標準）:

• ARIA ランドマーク
• エラーメッセージの紐付け
• タップターゲット 24x24px 以上
• prefers-reduced-motion 対応
• 動画の字幕

まとめ

アクセシビリティ対応は「障害を持つ一部の人のためだけ」ではありません。キーボードユーザー、高齢者、モバイル利用者、悪環境でのアクセスなど、全てのユーザー体験を改善します。

SEO にも有利に働き、Google はアクセシビリティの高いページを優遇する傾向があります。

まずはセマンティックHTML、alt属性、キーボード対応、色コントラストの4点から始めましょう。これだけでWCAG AA の大部分をカバーできます。

参考リンク

• Web Content Accessibility Guidelines (WCAG) 2.2
• WCAG 2.2 Quick Reference - W3C
• MDN Accessibility
• WebAIM: Web Accessibility In Mind
• axe DevTools