WCAG 2.1 AA準拠の実装ガイド：主要達成基準と検証方法
要約WCAG 2.1はウェブアクセシビリティの国際基準。実務の目標はレベルAA(A・AA合計50項目)への準拠と、その継続的な維持です。
WCAG 2.1とは
WCAG 2.1(Web Content Accessibility Guidelines 2.1)とは、ウェブの標準化団体であるW3Cが2018年に勧告した、ウェブアクセシビリティの国際的なガイドラインです。高齢者や障害のある人を含む誰もがウェブコンテンツを利用できるようにするための要件を「達成基準」として定めており、世界各国の法制度・調達基準の技術的な物差しとして参照されています。
WCAG 2.1は、先行するWCAG 2.0(2008年勧告)の達成基準61項目をすべて含んだうえで、スマートフォン利用・ロービジョン(弱視)・認知障害への対応を強化する17項目を追加した上位互換の基準です。つまりWCAG 2.1に準拠すれば、WCAG 2.0にも自動的に準拠したことになります(なお2023年には、さらに達成基準を追加したWCAG 2.2も勧告されています)。日本の規格であるJIS X 8341-3:2016はWCAG 2.0と内容が同一のため、WCAG 2.1 AAを目標にすればJISも同時にカバーできます。規格間の関係はJIS X 8341-3:2016 完全解説 →で詳しく整理しています。
なお、日本で「義務化」と呼ばれているのは、2024年4月施行の改正障害者差別解消法による「合理的配慮の提供」の義務化です。WCAG対応を含むウェブアクセシビリティの「環境の整備」自体は努力義務ですが、環境整備が進んでいないと個別の合理的配慮も成立しにくいため、WCAG 2.1 AAが実務上の対応水準となっています。制度の全体像は義務化対応の全体像(完全ガイド)→をご覧ください。
4つの原則 — 知覚可能・操作可能・理解可能・堅牢
WCAG 2.1のすべての達成基準は、次の4つの原則のいずれかに属します。原則を押さえておくと、個々の基準を「何のための要件か」から理解でき、実装判断がぶれにくくなります。
| 原則 | 意味 | 代表的な要件 |
|---|---|---|
| 知覚可能 (Perceivable) | 情報とUIは、利用者が知覚できる方法で提示されなければならない | 画像の代替テキスト/コントラスト比の確保/色だけに頼らない情報伝達/動画のキャプション |
| 操作可能 (Operable) | UIの部品とナビゲーションは、操作できなければならない | キーボードだけでの操作/フォーカスの可視化/十分な操作時間/わかりやすいページタイトルと見出し |
| 理解可能 (Understandable) | 情報とUIの操作は、理解できなければならない | ページの言語指定/予測可能な画面挙動/フォームのラベルとエラーの説明 |
| 堅牢 (Robust) | コンテンツは、支援技術を含む幅広いユーザーエージェントが解釈できるほど堅牢でなければならない | 支援技術が正しく解釈できるマークアップ/スクリーンリーダーへの名前・役割・値の伝達 |
AAレベルの主要達成基準 — 実装ポイント一覧
レベルAAに適合するには、レベルAの30項目とAAの20項目、合計50項目の達成基準をすべて満たす必要があります。ここでは、実装現場でつまずきやすい代表的な基準を「何をすればよいか」の視点で整理します。
なお、Sitedriveが「80項目以上」としているのは、この達成基準そのものではなく、達成基準を機械的に検査するための検出ルールの数です。1つの達成基準に対して複数の検出ルールが対応することがあるため、規格の項目数(50)とツールの検出ルール数(80以上)は一致しません。
| 達成基準 | レベル | 実装ポイント |
|---|---|---|
| 1.1.1 非テキストコンテンツ (代替テキスト) | A | 意味のある画像には内容を伝えるaltを記述する。装飾目的の画像はalt=""で支援技術から隠す |
| 1.4.3 コントラスト(最低限) | AA | 文字と背景のコントラスト比を4.5:1以上にする(大きな文字は3:1以上)。グレーの注釈文字やボタンの白抜き文字が典型的な違反箇所 |
| 1.4.4 テキストのサイズ変更 | AA | 200%まで拡大しても情報と機能が失われないようにする。文字サイズは固定値でなく相対単位で指定する |
| 1.4.10 リフロー | AA | 幅320px相当まで縮めても横スクロールなしで読めるレイアウトにする(WCAG 2.1の新基準。レスポンシブ対応が実質的な要件) |
| 1.4.11 非テキストのコントラスト | AA | ボタンや入力欄の境界線、アイコン、グラフなど意味を持つ図形要素も、隣接する色とのコントラスト比を3:1以上にする(WCAG 2.1の新基準) |
| 2.1.1 キーボード | A | すべての機能をキーボードだけで操作できるようにする。マウスホバー前提のメニューやdiv製の疑似ボタンが典型的な違反箇所 |
| 2.4.7 フォーカスの可視化 | AA | キーボード操作時にフォーカス位置が見えるようにする。CSSでoutline: noneを指定して消さない |
| 3.3.1 / 3.3.2 エラーの特定・ラベル | A | フォームの各入力欄にlabelを関連付け、エラー時は「どの項目が・なぜ」誤りかをテキストで示す。色だけの警告は不可 |
| 3.1.1 ページの言語 | A | <html lang="ja">のように、ページの主たる言語を指定する |
| 4.1.2 名前(name)・役割(role)・値(value) | A | カスタムUI(タブ・モーダル・アコーディオン等)には適切なroleと状態を実装し、スクリーンリーダーが解釈できるようにする |
上の表は代表例であり、AA適合には50項目すべての確認が必要です。主要項目のセルフチェックには30項目チェックリスト(無料ダウンロード)→を起点にすると、社内の合意形成まで含めて進めやすくなります。
A・AA・AAAの違いと選び方
WCAG 2.1の達成基準は、重要度と達成の難易度に応じてA・AA・AAAの3つの適合レベルに分かれています。
| 適合レベル | 水準の目安 | 選び方 |
|---|---|---|
| A | 最低限の要件。満たさないと利用そのものが困難になる(代替テキスト、キーボード操作など) | 単独で目標にすることは少なく、AAへの通過点と位置づける |
| AA | 実務上の標準。コントラスト比、フォーカス可視化、リフローなどを含む | 一般のウェブサイトが目標とすべき水準。公的機関の方針や調達要件もAAが基準 |
| AAA | 最高水準。手話通訳の提供など、全ページでの達成が現実的でない基準を含む | サイト全体の目標にはせず、達成できる個別基準のみ部分的に採用する |
結論はシンプルで、迷ったらAAを目標にするのが正解です。W3Cもサイト全体の方針としてAAAを要求することは推奨しておらず、日本の公的機関がJIS X 8341-3:2016で求める水準もAAです。まずレベルAAまでの達成基準50項目を満たし、その状態を更新のたびに維持し続けることに投資すべきです。
AA準拠の検証方法 — 5ステップ
WCAG 2.1 AAへの準拠は、一度の改修で終わりではありません。次の5ステップを1つのサイクルとして回すのが実務の定石です。
- 対象ページの棚卸し:サイト内のページとテンプレートを一覧化し、検証対象の範囲(サイト全体か、主要導線か)と目標レベル(AA)を決める
- 自動チェックツールで一次診断:コントラスト比・alt欠落・マークアップ不備など機械判定できる項目を全ページに対して洗い出し、違反の分布を把握する
- キーボード・スクリーンリーダーで手動確認:Tabキーだけで主要な操作(検索・フォーム送信・購入等)を完了できるか、読み上げ順序や代替テキストの内容が適切かを確認する
- 課題の優先順位付けと修正:利用への影響が大きい違反(キーボード操作不能、フォームのラベル欠落等)から着手し、テンプレート起因の違反をまとめて修正する
- 再検証と継続監視:修正後に再チェックして適合を確認し、以後はページ追加・更新のたびに劣化していないかを監視し続ける
このうち工数が膨らみやすいのがステップ2の網羅的な診断と、ステップ5の継続監視です。Sitedriveは80項目以上の自動検出ルールによる自動診断で違反箇所と修正方法を即座に提示し、AIが提示する修正案を承認いただくと自動で適用・再適用し、「直して維持する」段階まで省力化します。まずは30項目チェックリスト(無料PDF)→で自社サイトの現状を点検し、修正・維持の仕組みはSitedriveの自動修正詳細 →をご覧ください。
よくあるご質問
WCAG 2.1への準拠は法律上の義務ですか？
なぜレベルAAAではなくAAを目標にするのですか？
WCAG 2.1とJIS X 8341-3:2016は、どちらに対応すればよいですか？
自動チェックツールだけでAA準拠を確認できますか？
『30項目チェックリスト』を無料配布中
義務化対応の現状把握に。メールアドレスをご入力いただくと、PDFのダウンロードリンクをメールでお送りします。