WCAG 2.2をやさしく深く理解する完全ガイド：WCAG 2.1との違い、新しい達成基準9項目、実務への落とし込み、運用の考え方まで
概要サマリー（先に要点）
- WCAG 2.2 は、Webコンテンツのアクセシビリティを高めるためのW3C勧告で、WCAG 2.1に9つの達成基準を追加し、4.1.1 Parsing を廃止した版です。[^1]
- 新しく加わった9項目は、フォーカス可視性、ドラッグ操作の代替、ターゲットサイズ、認証のしやすさ、ヘルプの見つけやすさ、エラー入力の再入力負担の軽減など、日々の実装で本当に困りやすいところを補強しています。[^2]
- 実務では、WCAG 2.2 AA を目標にすると、フォーム、ボタン、ドラッグUI、ログイン、サポート導線、固定ヘッダー周りなどの見直しが特に重要になります。[^3]
- WCAG 2.2はW3C勧告であり、さらにISO/IEC 40500:2025 としても承認されています。[^4]
対象読者（具体）：Web担当者、UI/UXデザイナー、フロントエンドエンジニア、QA、アクセシビリティ担当、自治体・教育機関・企業のWeb運用担当
アクセシビリティレベル：WCAG 2.2 AA 準拠を目指す方向け
1. はじめに：WCAG 2.2とは何か
WCAG 2.2 は、W3Cが公開している Web Content Accessibility Guidelines の最新版のひとつで、2023年10月にW3C勧告となったアクセシビリティ標準です。目的は、障害のある方を含む多様な利用者が、WebサイトやWebアプリを 知覚し、操作し、理解し、安定して利用できる ようにすることにあります。W3CはWCAG 2系の全体像の中で、2.2は2.1の拡張版として位置づけており、2.1までの考え方を受け継ぎながら、不足していた実務上の課題を補強したものだと示しています。[^5]
WCAG 2.2 を理解するときに大切なのは、これは単なる「チェックリスト」ではなく、利用者が途中で困らないための設計原則だということですの。見た目だけ整っていても、キーボードで操作できない、エラーの直し方が分からない、ドラッグしないと進めない、ログインで認知負荷が高い、こうした状態では実質的に使えません。WCAG 2.2 は、そうした「使えない」を減らすために、現実の利用場面にかなり近いところまで踏み込んでいます。[^3]
2. WCAG 2.1から何が変わったのか
W3Cの案内では、WCAG 2.2 は WCAG 2.1 に9つの達成基準を追加したものです。そして、2.0と2.1の達成基準は基本的に2.2でも同じですが、例外として 4.1.1 Parsing が obsolete（廃止扱い）となり、2.2から削除されています。つまり、2.2を学ぶときは、2.1までの土台をそのまま受け継いだうえで、新しく追加された9項目を重点的に理解するのが効率的ですわ。[^1]
追加された9項目は、W3Cの「What’s New in WCAG 2.2」で整理されています。具体的には、2.4.11 Focus Not Obscured (Minimum)、2.4.12 Focus Not Obscured (Enhanced)、2.4.13 Focus Appearance、2.5.7 Dragging Movements、2.5.8 Target Size (Minimum)、3.2.6 Consistent Help、3.3.7 Redundant Entry、3.3.8 Accessible Authentication (Minimum)、3.3.9 Accessible Authentication (Enhanced) です。これらは、フォーカスの見え方、ドラッグ依存、タップしやすさ、サポート導線、再入力負担、認証のしづらさといった、実際のUIで困りやすいテーマに集中しています。[^2]
ここがとても大事なのですが、WCAG 2.2 は「新しい革命」というより、2.1で足りなかった運用上の痛点を丁寧に埋めた版として理解すると分かりやすいですの。以前からアクセシビリティを意識してきた方には、急に別世界の標準になったわけではありません。一方で、フォーム・ログイン・モバイル・ドラッグUI・固定ヘッダー などを持つサイトでは、実装の見直しポイントがかなり明確になった、と考えると実務に落とし込みやすいです。[^3]
3. WCAG 2.2の全体構造：4原則と適合レベル
WCAG 2.2 も、これまでのWCAG 2系と同じく、知覚可能（Perceivable）・操作可能（Operable）・理解可能（Understandable）・堅牢（Robust） の4原則で構成されています。さらにその下にガイドラインがあり、最終的にはテスト可能な達成基準に分かれています。適合レベルは A、AA、AAA の3段階で、一般的な実務目標として最も多いのは AA です。[^3]
適合の考え方も重要です。W3Cの「Understanding Conformance」では、WCAG 2 の適合とは、そのレベルで要求される達成基準に違反するコンテンツが存在しないことだと説明されています。つまり、部分的に良い箇所があっても、主要導線に一つ深刻な違反があれば、そのページや体験全体として適合とは言いにくくなりますの。だからこそ、トップページだけでなく、検索、フォーム、購入、ログイン、PDF、通知UI といった実利用の導線をまとめて見ることが大切です。[^6]
4. 新しい達成基準を一つずつ理解する
4.1 2.4.11 Focus Not Obscured (Minimum)
この基準は、キーボードフォーカスが 他の固定要素やオーバーレイに隠されない ことを求めます。たとえば固定ヘッダーやCookieバナー、下部固定CTAが、現在フォーカスされているボタンや入力欄を隠してしまうと、利用者は「今どこにいるのか」を見失います。これはとても現実的な問題で、特にモバイルやズーム時に起きやすいですの。[^2]
4.2 2.4.12 Focus Not Obscured (Enhanced)
こちらは 2.4.11 の強化版で、フォーカス対象が 一部ではなく完全に見えることを求める、より厳しい基準です。実務ではAA目標だと主に 2.4.11 を見ることが多いですが、設計段階で余裕を持っておくと、ズームや狭い画面でも安定します。[^2]
4.3 2.4.13 Focus Appearance
この基準は、フォーカスインジケーターが十分に 見える大きさ・コントラスト を持つことを求めます。要するに、「フォーカスリングを薄く小さくして、おしゃれに見えなくする」のを防ぐ基準ですの。キーボード利用者にとって、フォーカスは現在地そのものですから、見えないと実質操作不能になります。[^2]
4.4 2.5.7 Dragging Movements
ドラッグだけで操作させない、という考え方です。並び替え、スライダー、地図操作、範囲選択などで、ドラッグの代わりにボタン操作や単純なタップ操作が用意されている必要があります。これはモバイル、肢体不自由、代替入力、スイッチ操作など、多くの状況に効きますの。[^2]
4.5 2.5.8 Target Size (Minimum)
この基準は、タップやクリックの対象が小さすぎないことを求めます。細かい数値や例外条件はWCAG本文で確認が必要ですが、実務の感覚としては、押しやすい余白とサイズを意識することが大切ですわ。小さすぎるリンクやアイコンは、モバイルだけでなく、視線入力や高齢者にも不利です。[^2]
4.6 3.2.6 Consistent Help
ヘルプ、サポート、問い合わせなどの導線は、ページごとにバラバラにしないで、一貫した位置と見つけやすさを保つことが求められます。困ったときの導線が毎回違うと、必要な人ほど助けを求めにくくなるからですの。[^2]
4.7 3.3.7 Redundant Entry
同じ情報を、同じプロセスの中で何度も入力させないことを求めます。たとえば住所や会員番号など、すでに入力済み・取得済みの情報を再入力させるのは負担が大きいですわ。オートフィルや引き継ぎ表示、確認画面の設計が関わってきます。[^2]
4.8 3.3.8 Accessible Authentication (Minimum)
認証時に、記憶、複雑な再現、謎解き的な認知課題だけを要求しないことが求められます。たとえば、覚えた文字列をそのまま入力させる、パズル的CAPTCHAだけを要求する、という形は負担が大きいですの。パスワードマネージャーの利用、コピー&ペースト、パスワード表示、Magic Link、デバイス認証など、認知負荷を下げる方向が重要になります。[^2]
4.9 3.3.9 Accessible Authentication (Enhanced)
3.3.8 のさらに強い版で、より高い水準で認証のしやすさを求めるものです。AAA寄りの考え方として、認証を“覚えているかどうか”に強く依存させない方向を理解しておくと、将来的な設計にも役立ちますわ。[^2]
5. 実務で特に影響が大きい領域
WCAG 2.2 は全体に関わりますが、実務で特に影響が大きいのは フォーム、ログイン、モバイルUI、固定要素、ドラッグ操作、ヘルプ導線 です。たとえばフォームでは、同じ住所を何度も入力させていないか、ログインではパスワードマネージャーを妨げていないか、固定ヘッダーがフォーカス位置を隠していないか、モバイルのボタンが小さすぎないかを優先して見ると、改善効果が高いですの。[^3]
また、W3Cは WCAG 2.2 をモバイルアプリケーションへどう適用するかの案内も出しています。これは規範文書ではなく参考ガイダンスですが、モバイル・ネイティブアプリ・ハイブリッドアプリにも 2.2 の考え方が実務上とても重要だと示しています。モバイル中心のサービスでは、2.5.7 や 2.5.8 の影響はかなり大きいと考えてよいですわ。[^7]
6. WCAG 2.2 AA を目指すときの進め方
いきなり全文を読み込んで完璧に対応しようとすると、現場は疲れてしまいますの。おすすめは、次の順番です。
6.1 まずは既存のWCAG 2.1 AAの土台を確認
WCAG 2.2 は 2.1 の上に積み上がるので、見出し、ラベル、キーボード、コントラスト、alt、エラー通知などの基本が崩れていると、2.2の前に直すことがたくさんあります。[^1]
6.2 次に、新規追加9項目のうち影響が大きいものから着手
特におすすめの優先順位は、
- 2.4.11 / 2.4.13 フォーカスが見える・隠れない
- 2.5.7 / 2.5.8 ドラッグ代替・ターゲットサイズ
- 3.3.7 / 3.3.8 再入力負担・認証負担
- 3.2.6 ヘルプ導線の一貫性
です。これらは利用体験への影響が大きく、改善効果も分かりやすいですわ。[^2]
6.3 コンポーネント単位で標準化する
前にもご案内したように、ボタン、フォーム、モーダル、タブ、通知、検索、Cookieバナーなどをデザインシステム化しておくと、WCAG 2.2対応が運用に乗りやすくなります。フォーカスリング、ターゲットサイズ、ドラッグ代替、エラー要約などを部品の仕様に埋め込むのが効果的ですの。[^8]
7. よくある誤解
7.1 「WCAG 2.2 は 2.1 を全部捨てて学び直すもの」
いいえ、そうではありません。W3Cも、2.0と2.1の達成基準は基本的に2.2でも同じだと案内しています。2.2は、2.1を置き換えるというより、2.1を現実的に強くした版として見ると分かりやすいですわ。[^1]
7.2 「WCAG 2.2はデザイナーだけ、またはエンジニアだけが見ればよい」
これも違いますの。フォーカス可視性やターゲットサイズはデザインの課題ですが、認証や再入力の削減はプロダクト設計、実装、法務、運用とも関係します。ヘルプの一貫性は情報設計やサポート運用にもまたがります。だからこそ、チーム全体の共通言語として扱うのが望ましいです。[^2]
7.3 「準拠はツールで自動判定できる」
自動ツールは役立ちますが、認証の認知負荷やヘルプの一貫性、再入力の無駄、拒否しやすい同意UIなどは、人の判断が必要です。W3CのQuick ReferenceやUnderstanding Documentsを見ながら、自動＋手動＋体験確認で進めるのが現実的ですわ。[^9]
8. 5分で見る実務チェックポイント
- 固定ヘッダーやバナーが、キーボードフォーカスを隠していないか。[^2]
- フォーカスリングが十分見えるか。薄い色や細線だけで済ませていないか。[^2]
- ドラッグが必要なUIに、ボタンや単純操作の代替があるか。[^2]
- ボタンやリンクが小さすぎず、押しやすいか。[^2]
- 問い合わせ、ヘルプ、サポートへの導線がページごとに迷子になっていないか。[^2]
- すでに入力した情報を、同じ流れの中で再度入力させていないか。[^2]
- ログインでパスワードマネージャーや貼り付けを不必要に妨げていないか。[^2]
9. 誰にとって役立つのか
WCAG 2.2 は、障害のある方だけでなく、高齢者、モバイル利用者、疲れている人、仮のケガで片手しか使えない人、複雑な認証が苦手な人、通信が不安定な環境にいる人など、幅広い人に役立ちます。W3CもWCAG 2がモバイルや動的コンテンツ、ICT全般に適用できる考え方を持っていると説明しています。アクセシビリティは特別対応ではなく、現実の多様な利用状況に対応する品質管理だと理解するのが自然ですわ。[^10]
10. まとめ
WCAG 2.2 は、WCAG 2.1 を土台にしながら、フォーカス、ドラッグ、ターゲットサイズ、ヘルプ、再入力、認証といった実務上の困りごとを丁寧に補強した標準です。W3C勧告であり、現在は ISO/IEC 40500:2025 としても承認されています。[^4]
実装の優先順位としては、まず既存の2.1 AAの土台を確認し、そのうえで 新しい9項目の中でも影響が大きいところから順に 対応していくのがおすすめですの。特に、フォーカス可視性、固定要素による隠れ、ドラッグ代替、ターゲットサイズ、認証のしやすさ、再入力削減は、利用体験に直結しやすいです。[^2]
WCAG 2.2 は、読むと少し難しく感じるかもしれません。けれど本質は、とてもやさしいものです。
「見えるか」だけでなく、「押せるか」「分かるか」「戻れるか」「無理なく続けられるか」まで考えること。
そこまで丁寧に見ることで、Webはずっと使いやすく、信頼されるものになりますわ。
参考リンク
- WCAG 2.2（W3C）
- What’s New in WCAG 2.2（W3C WAI）
- WCAG 2 Overview（W3C WAI）
- How to Meet WCAG 2.2 – Quick Reference（W3C WAI）
- Understanding WCAG 2.2（W3C WAI）
- About WCAG Understanding Documents（W3C WAI）
- WCAG 2.2 is a Web Standard “W3C Recommendation”（W3C WAI News）
- WCAG 2.2 Approved as an ISO Standard（W3C WAI News）
- Guidance on Applying WCAG 2.2 to Mobile Applications（W3C）
- WCAG 2 FAQ（W3C WAI）