アクセシビリティ 2026/06/19

【2026年版】WCAG対応の方法｜WCAG 2.1/2.2の達成基準と実装手順を実践的に解説

「WCAGに対応しなければいけないと言われたが、何をどこから始めればいいのかわからない」——Web担当者・エンジニア・デザイナーからよく寄せられる声です。WCAG（Web Content Accessibility Guidelines）は国際的なウェブアクセシビリティの標準規格ですが、達成基準の数が多く、実装方法も多岐にわたるため、具体的なアクションに落とし込むのが難しいと感じる方は多いはずです。

本記事では、WCAG 2.1/2.2の概要・A・AA・AAAの達成レベルの違い・4つの原則別の実装手順・自動チェックツールの活用まで、実務担当者が「今日から動ける」レベルで解説します。

この記事でわかること

WCAGとは何か（基本概念と重要性）
WCAG 2.1と2.2の違い
A・AA・AAAの達成レベルと対応優先度
4原則別の具体的な実装手順
自動チェックツールの活用方法

WCAGとは

WCAG（Web Content Accessibility Guidelines、ウェブコンテンツ・アクセシビリティ・ガイドライン）は、W3C（World Wide Web Consortium）が策定したウェブアクセシビリティの国際標準規格です。視覚・聴覚・運動・認知などに障害を持つユーザーを含む、すべての人がウェブコンテンツにアクセスできるようにするための技術的なガイドラインを定めています。

WCAGは、以下の4つの原則（通称POUR原則）のもとに達成基準が体系化されています。

知覚可能（Perceivable）: ユーザーが情報を何らかの感覚で知覚できること
操作可能（Operable）: ユーザーインターフェースを操作できること
理解可能（Understandable）: 情報と操作の方法が理解できること
堅牢（Robust）: 多様な支援技術でコンテンツが解釈できること

日本では、WCAGを参照した国内規格としてJIS X 8341-3が制定されており、政府・自治体サイトはこの規格への準拠が義務付けられています。民間企業でも対応基準として広く参照されています。

WCAG 2.1 と 2.2 の違い

現在主流となっているバージョンは、2018年に勧告されたWCAG 2.1と、2023年に勧告されたWCAG 2.2です。

WCAG 2.1で追加された主な達成基準

WCAG 2.1ではモバイルアクセシビリティと認知・学習障害への対応が強化され、主に以下の達成基準が追加されました。

1.3.4 表示の向き: コンテンツの表示を特定の向き（横・縦）に限定しないこと
1.3.5 入力目的の識別: 入力フィールドの目的（名前・メールアドレスなど）を特定できること
4.1.3 ステータスメッセージ: 状態変化のメッセージをスクリーンリーダーで読み取れること

WCAG 2.2で追加された主な達成基準

WCAG 2.2ではさらに認知障害・低視力・モバイル操作性への対応が拡充されました。主な追加基準は以下の通りです。

2.4.11 フォーカスの外観（最小）: フォーカスインジケーターのサイズ・コントラストの最低基準
2.4.12 フォーカスの外観（強化）: より高いフォーカスインジケーター基準（レベルAAA）
2.5.7 ドラッグ操作: ドラッグで行う操作に代替手段を提供すること
2.5.8 ターゲットサイズ（最小）: タッチ操作ターゲットの最小サイズを24×24CSS pxに
3.2.6 一貫したヘルプ: ヘルプへのアクセス手段を一貫した位置に配置すること
3.3.7 余分な認証を行わない: ログイン時の認知テスト（文字起こし等）を不要にすること
3.3.8 アクセシブルな認証（最小）: 認知機能テストのないログイン手段を提供すること

WCAG 2.2は2.1の上位互換であり、2.1に準拠した上でWCAG 2.2の追加基準にも対応するのが理想的な進め方です。

A・AA・AAAの達成レベルの違いと対応優先度

WCAGの各達成基準には、A・AA・AAAの3段階の達成レベルが設定されています。

レベル	概要	対応優先度
A	最低限のアクセシビリティ要件。これを達成しないと特定のユーザーにとって利用不可能	必須
AA	一般的な対応目標。多くの法令・公的ガイドラインがこのレベルを要求	推奨（多くの場合の対応目標）
AAA	最高レベル。一部のコンテンツタイプでは達成が困難	可能な範囲で対応

実務では、まずレベルAをすべて達成し、次にレベルAAへの対応を優先します。レベルAAAはすべてを達成することが困難なため、達成できる項目から取り組む姿勢が現実的です。

政府・自治体サイトはJIS X 8341-3のレベルAAへの準拠が義務付けられており、民間企業でもレベルAAを目標とするのがグローバルスタンダードです。

WCAG対応の実装手順（主要カテゴリ別）

WCAG 2.1/2.2のPOUR原則に沿って、主要な実装手順を解説します。

知覚可能（Perceivable）— 代替テキスト・色のコントラスト

代替テキスト（alt属性）の設定

すべての意味ある画像に適切なaltテキストを設定します。

<!-- 良い例 -->
<img src="graph.png" alt="2024年度の売上推移グラフ：第3四半期に前年比120%を達成">

<!-- 装飾目的の画像は空のalt属性 -->
<img src="decoration.png" alt="">

altテキストは画像が「何を伝えているか」を具体的に記述します。「画像」「写真」などの無意味なテキストは避けましょう。

色のコントラスト比の確保

通常テキスト（18pt未満）はコントラスト比4.5:1以上（レベルAA）、大きなテキスト（18pt以上または14pt太字以上）は3:1以上が必要です。

コントラスト比はブラウザの開発者ツールや専用ツール（WebAIM Contrast Checker等）で確認できます。

キャプションの提供

動画コンテンツには字幕を、音声のみのコンテンツには文字起こし（トランスクリプト）を提供します。

操作可能（Operable）— キーボード操作・フォーカス表示

キーボードのみでの操作

すべての機能（リンク・ボタン・フォーム・ドロップダウン・モーダル）をキーボードのみで操作できることを確認します。

Tabキーでフォーカスが移動すること
Enterキーまたはスペースキーでボタン・リンクを実行できること
Escキーでモーダル・ドロップダウンを閉じられること
フォーカストラップを回避できること（モーダル内でTabが無限ループしないよう注意）

フォーカスリングの視覚的表示

キーボード操作時に「現在どの要素にフォーカスがあるか」を視覚的に示すフォーカスリングを必ず表示します。CSSでのフォーカスリング非表示（outline:none）は避けてください。

/* 良い例：フォーカスリングをカスタマイズして表示する */
:focus-visible {
  outline: 3px solid #005FCC;
  outline-offset: 2px;
}

十分なタッチターゲットサイズ

モバイルでのタッチ操作ターゲット（ボタン・リンク）は、WCAG 2.2では最小24×24CSS px（推奨は44×44CSS px）を確保します。

理解可能（Understandable）— エラー説明・言語属性

ページの言語属性の設定

HTMLのlang属性でページの言語を明示します。スクリーンリーダーが適切な読み上げ言語を選択するために必要です。

<html lang="ja">

フォームのエラーメッセージ

フォームエラー発生時は、何が問題で、どう修正すれば良いかを明確に伝えます。

<!-- 良い例 -->
<input type="email" aria-describedby="email-error">
<span id="email-error" role="alert">
  メールアドレスの形式が正しくありません。例：example@email.com
</span>

エラーメッセージは「入力してください」ではなく「〇〇の形式で入力してください」と具体的に記述しましょう。

ラベルとフォーム入力の関連付け

すべての入力フィールドに適切なラベルを関連付けます。

<!-- 良い例 -->
<label for="name">お名前<span aria-label="必須">*</span></label>
<input type="text" id="name" name="name" required>

堅牢（Robust）— セマンティックHTML・ARIAの活用

セマンティックHTMLの使用

見出し・リスト・テーブル・ボタンなどの要素は、見た目だけでなく意味に合ったHTMLタグを使用します。

<!-- 良い例：役割に合ったタグを使う -->
<h1>ページタイトル</h1>
<h2>セクション見出し</h2>
<button type="button">送信する</button>
<ul>
  <li>リスト項目1</li>
</ul>

<!-- 悪い例：divとspanで意味を持たせようとする -->
<div class="heading">ページタイトル</div>
<span class="button">送信する</span>

ARIAの適切な活用

ARIAはHTMLだけでは表現できないアクセシビリティ情報を付加するために使います。ただし「ネイティブHTMLで実現できる場合はARIAを使わない」が原則です。

<!-- モーダルダイアログの例 -->
<div role="dialog" aria-modal="true" aria-labelledby="dialog-title">
  <h2 id="dialog-title">確認</h2>
  <p>送信してよろしいですか？</p>
</div>

WCAG対応の自動チェックツール活用法

WCAG対応状況を効率的に把握するには、自動チェックツールが有効です。ただし、自動チェックで検出できる基準は全体の30〜40%程度とも言われており、手動確認・スクリーンリーダーでの操作確認との組み合わせが必要です。

代表的なツール

axe DevTools: ブラウザ拡張機能。開発者向けの詳細な違反レポートを生成
WAVE: Webブラウザ拡張機能。ビジュアルなフィードバックでわかりやすい
Lighthouse: Chrome DevTools内蔵のアクセシビリティ監査ツール

DejamのウェブアクセシビリティチェックでLPを効率的に確認

LP担当者・マーケターが効率よくアクセシビリティ対応状況を把握するには、Dejamの**ウェブアクセシビリティ機能**が有効です。LPのアクセシビリティ課題を自動検出し、改善優先度と対処方法をわかりやすく提示します。

エンジニアでなくてもLPのアクセシビリティ状況を把握でき、改善指示をスムーズに出せるため、実装工数の削減と品質向上を同時に実現できます。

よくある質問（FAQ）

Q. WCAG 2.1とWCAG 2.2、どちらに対応すればよいですか？

可能であればWCAG 2.2への対応を目指すことをおすすめします。WCAG 2.2は2.1の上位互換であるため、2.1に対応した上でWCAG 2.2の追加基準を確認するアプローチが現実的です。現時点でJIS X 8341-3はWCAG 2.1相当ですが、将来的には2.2相当への改訂が予想されます。

Q. WCAG対応は一度やれば終わりですか？

いいえ、サイトの更新・リニューアル・新機能追加のたびに再確認が必要です。継続的な品質維持のために、開発・デザインプロセスにアクセシビリティチェックを組み込む（シフトレフト）ことが理想的です。

Q. WCAG対応でサイトのデザインが損なわれませんか？

適切に対応すれば、デザインの質を損なうことはありません。色のコントラスト・フォントサイズ・フォーカスリングのデザインはカスタマイズが可能です。アクセシビリティとデザインの両立を意識したデザインシステムを構築することで、むしろサイト全体の品質向上につながります。

まとめ

WCAG対応は「難しい」と感じられがちですが、基本的な実装手順を理解し、優先度（レベルA→AA）に従って段階的に進めることで、着実に達成できます。

まずはレベルAの必須要件（alt属性・コントラスト比・キーボード操作・エラーメッセージ・セマンティックHTML）から着手し、自動チェックツールで現状を把握した上でレベルAAへと対応範囲を広げていくアプローチが現実的です。

CVR改善ならDejam！

Dejamは、LP制作・ヒートマップ分析・ABテスト・AI自動解析をオールインワンで提供するCVR改善特化ツールです。

Dejamが選ばれる理由

国内唯一のワンプロダクト: LP制作・ヒートマップ分析・ABテストをすべて単一ツールで完結
月額3万円〜利用可能: オプティマイズプラン月額3万円〜 / CMSプラン月額5万円〜 / オールインワン月額12万円〜
ISMS認証取得: ISO/IEC 27001:2022 & JIS Q 27001:2023認証取得済み
毎週アップデート: 市場トレンドとユーザーリクエストに応じて機能を毎週拡充

Dejamの詳しい機能を見る →　無料トライアルを申し込む →

タグ: ウェブアクセシビリティ WCAG JIS X 8341-3 アクセシビリティ対応 WCAG対応 WCAG 2.1 WCAG 2.2

この記事の監修者

平井翔吏

株式会社LeanGo 代表取締役CEO / Dejamプロダクトオーナー

CVRを改善するノウハウを体系化するプロフェッショナル。

株式会社リクルートホールディングスに新卒入社、ゼクシィのUXデザインを担当。累計250件以上の施策を実施しCVR改善を140%達成。タグ検索の開発やゼクシィ花嫁割のリブランディングなどのプロジェクトオーナーとして事業を推進した。

株式会社LeanGoを設立。CVR改善ツールDejamのプロダクトオーナー。運用型LPOやセグメントCVRなど独自のメソッドを構築、PDCAハンドスピナーをはじめとするプロモーションも実施している。日本最高峰のダイレクトマーケティングカンファレンス「ダイレクトアジェンダ2025」「ダイレクトアジェンダ2026」のAgenda awardにて2連覇。