WCAG 2.1 — ウェブアクセシビリティガイドライン完全解説 2026
「WCAG 2.1って何?」と聞かれたら、あなたは答えることができますか?WCAG(Web Content Accessibility Guidelines)は、ウェブコンテンツのアクセシビリティに関する国際的なガイドラインです。ADA、EAA、日本のJIS X 8341-3など、世界中のアクセシビリティ法の技術的基準となっています。
この完全ガイドでは、WCAG 2.1の基本から4つの原則(POUR)、50以上の達成基準まで、わかりやすく解説します。
📌 簡単な答え — WCAG 2.1とは?
WCAG(Web Content Accessibility Guidelines)は、W3Cが開発したウェブコンテンツのアクセシビリティに関する国際標準です。WCAG 2.1 Level AAは、ADA、EAA、日本のJIS X 8341-3が要求する技術的基準です。
WCAG 2.1とは?— 基本概要
WCAG(Web Content Accessibility Guidelines)は、W3C(World Wide Web Consortium)が開発したウェブコンテンツのアクセシビリティに関する国際標準です。WCAG 2.1は2018年に公開され、WCAG 2.0を拡張してモバイルデバイス、認知障害のある人々、視覚障害のある人々のための新しい基準を追加しました。
WCAG 2.1は、以下の4つの原則(POUR)に基づいています:
📊 WCAG 2.1の基本情報
- 50以上の達成基準(レベルA、AA、AAA)
- 4つの原則(知覚可能、操作可能、理解可能、堅牢)
- Level AAがADA、EAA、日本のJIS X 8341-3の要求レベル
- 78%のウェブサイトにWCAG違反があります
WCAG 2.1の4つの原則 — POUR
WCAG 2.1は4つの原則に基づいており、頭文字を取ってPOURと呼ばれます:
1. 知覚可能(Perceivable)
すべてのユーザーがコンテンツを知覚できる必要があります:
- 代替テキスト — すべての非テキストコンテンツに(1.1.1)
- キャプション — 動画に(1.2.2)
- 色のコントラスト — 最低4.5:1(1.4.3)
- テキストの拡大 — 200%まで拡大可能(1.4.4)
例:視覚障害のあるユーザーは、画像に代替テキストがないと、画像の内容を知ることができません。
2. 操作可能(Operable)
すべてのユーザーがコンテンツを操作できる必要があります:
- キーボードアクセシビリティ — すべての機能がキーボードで操作可能(2.1.1)
- フォーカス可視 — キーボードフォーカスが可視(2.4.7)
- スキップリンク — 「メインコンテンツへスキップ」(2.4.1)
- キーボードトラップなし — ユーザーが要素に閉じ込められない(2.1.2)
例:運動障害のあるユーザーは、マウスを使用できません。キーボードだけでサイトを操作できる必要があります。
3. 理解可能(Understandable)
すべてのユーザーがコンテンツを理解できる必要があります:
- フォームラベル — すべての入力フィールドに(3.3.2)
- エラーメッセージ — 明確で説明的(3.3.1)
- 言語指定 — HTMLのlang属性(3.1.1)
- 一貫したナビゲーション — 全ページで一貫(3.2.3)
例:認知障害のあるユーザーは、明確なラベルのないフォームを理解できません。
4. 堅牢(Robust)
コンテンツが支援技術と互換性がある必要があります:
- ARIA — 適切なARIAロールと属性(4.1.2)
- 有効なHTML — 重複IDや無効なHTMLがない(4.1.1)
- ステータスメッセージ — スクリーンリーダーに通知(4.1.3)
例:スクリーンリーダーユーザーは、適切なARIA属性がないとカスタムコンポーネントを操作できません。
WCAG 2.1の達成基準レベル
WCAG 2.1は3つのレベルを定義しています:
| レベル | 説明 | 法的要件 |
|---|---|---|
| レベルA | 最低限の要件 | 基本的なアクセシビリティ |
| レベルAA | 標準要件 | ✅ ADA、EAA、日本のJIS X 8341-3が要求 |
| レベルAAA | 高度な要件 | 推奨(必須ではない) |
重要:ADA、EAA、日本のJIS X 8341-3はすべてWCAG 2.1 Level AAを要求しています。
WCAG 2.1 vs WCAG 2.2 — 違いは何か?
WCAG 2.2は2023年に公開されました。主な新しい達成基準は:
- 2.4.11 — フォーカスが隠れない(最小) — フォーカスされた要素が隠れない
- 2.5.8 — ターゲットサイズ(最小) — タッチターゲット24x24px
- 3.2.6 — 一貫したヘルプ — ヘルプ機能が一貫して配置
重要:ADA、EAA、日本のJIS X 8341-3はWCAG 2.1を参照しており、WCAG 2.2ではありません。WCAG 2.2はベストプラクティスとして推奨されますが、必須ではありません。
🌍 WCAG 2.1 — グローバルスタンダード
- ADA(アメリカ) — WCAG 2.1 Level AA
- EAA(EU) — WCAG 2.1 Level AA
- 日本のJIS X 8341-3 — WCAG 2.1 Level AA
- オーストラリアDDA — WCAG 2.1 Level AA
- カナダAODA — WCAG 2.1 Level AA
結論:WCAG 2.1 Level AAは世界のアクセシビリティ基準です。
WCAG 2.1をテストする方法
ステップ1:自動テスト
無料のADAチェッカーを使用して、WCAG 2.1 Level AAに基づいてウェブサイトをスキャンします。
ステップ2:手動テスト
一部のWCAG基準は手動でしかテストできません:
- スクリーンリーダー — NVDA(Windows)、VoiceOver(Mac)
- キーボードナビゲーション — Tab、Enter、矢印キーのみを使用
- 色のコントラスト — 4.5:1コントラストを確認
ステップ3:文書化
すべてのテストと修正を文書化します。これはコンプライアンスの証拠となります。
よくある質問 — WCAG 2.1
WCAG(Web Content Accessibility Guidelines)は、ウェブコンテンツのアクセシビリティに関する国際標準です。WCAG 2.1 Level AAは、ADA、EAA、日本のJIS X 8341-3が要求するレベルです。
WCAG 2.1の4つの原則はPOUR(知覚可能、操作可能、理解可能、堅牢)です。すべてのウェブコンテンツはこれらの原則を満たす必要があります。
WCAG 2.2は2023年に公開され、新しい達成基準(フォーカスが隠れない、ターゲットサイズなど)を追加しました。ADAとEAAはWCAG 2.1を参照しています。
はい。ADA、EAA、日本のJIS X 8341-3はすべてWCAG 2.1 Level AAを要求しています。これは法的に必須のレベルです。
無料のADAチェッカーを使用して自動テストを行い、その後スクリーンリーダーとキーボードナビゲーションで手動テストを行います。
💬 Comments (0)