Insight / 機械に伝わるデータ設計
アクセシビリティ WCAG 2.2 — 誰も取りこぼさない WEB
読了目安 8 分
この記事の結論
WCAG 2.2 は 2023 年 10 月 5 日に W3C 勧告化され、達成基準が 9 個追加されました。代表的なのは、タップターゲットを最小 24×24 CSS ピクセルとする Target Size (Minimum) です。一方で 4.1.1 Parsing は廃止・削除されました。ここで誤解されやすいのが EAA(欧州アクセシビリティ法)。EAA のウェブ技術基準は WCAG 2.1 AA であって 2.2 ではありません。アクセシビリティは特定の人のためではなく、誰も取りこぼさないための設計です。
1. アクセシビリティは「誰も取りこぼさない」設計
アクセシビリティと聞くと「障害のある人への特別対応」と思われがちです。これは半分しか合っていません。確かに視覚・聴覚・運動などに障害のある人にとって不可欠ですが、効く相手はもっと広いのです。
加齢で細かい文字が読みづらくなった人。屋外の強い光で画面が見えにくい人。子どもを抱いて片手しか使えない人。誰もが一時的に「使いにくい状況」に置かれます。アクセシビリティ対応は、こうした全員の取りこぼしを同じ設計で減らします。
中小企業にとっての意味は明快です。せっかく訪れた人を、ボタンが小さい、文字が薄い、操作が複雑、という理由で逃さない。これは慈善ではなく、商機を取りこぼさないための実務です。
2. WCAG 2.2 とは — 9 基準追加と 1 基準削除
WCAG(ウェブコンテンツアクセシビリティガイドライン)は、W3C が定める国際的なアクセシビリティ基準です。最新版の WCAG 2.2 は 2023 年 10 月 5 日に勧告化されました。
2.1 からの変更は、達成基準が 9 個追加されたこと。代表的なのは、フォーカス位置が他の要素に隠れないことを求める Focus Not Obscured (Minimum)、ドラッグ操作に代替手段を求める Dragging Movements、そしてタップターゲットを最小 24×24 CSS ピクセルとする Target Size (Minimum) です。いずれも Level AA に含まれます。一方、4.1.1 Parsing は廃止・削除されました。
重要なのは、2.1 の基準はほぼそのまま 2.2 に引き継がれていることです。だから 2.2 対応は「ゼロからやり直し」ではなく、2.1 を土台にした積み増しです。すでに 2.1 AA を満たしているサイトなら、追加 9 基準への対応が次の一歩になります。
3. EAA のウェブ基準は 2.1 AA — よくある誤解の訂正
ここで誤解を 1 つはっきり正しておきます。「EAA に対応するには WCAG 2.2 が必須」という説明をときどき見かけますが、これは不正確です。
EAA(European Accessibility Act / 欧州アクセシビリティ法)は 2025 年 6 月 28 日に適用が始まりました。そのウェブ技術基準は、整合規格 EN 301 549 を経由して WCAG 2.1 の Level AA です。2.2 ではありません。「EAA だから 2.2 必須」は誤りなので、この区別は押さえておく価値があります。
もっとも、これは「2.2 をやらなくてよい」という意味ではありません。2.2 は 2.1 の上位互換であり、2.2 AA を満たせば自動的に 2.1 AA も満たします。実務の指針はシンプルです。法的な最低ラインは 2.1 AA、目指す到達点は 2.2 AA。誤った理由(EAA だから)ではなく、正しい理由(より多くの人を取りこぼさないため)で 2.2 を目指します。
4. 【Top 5】中小企業がまず押さえる 5 つの基準
WCAG の達成基準は数十項目ありますが、中小企業サイトで影響が大きく、確認もしやすいのは次の 5 つです。ここから着手すれば、取りこぼしを大きく減らせます。
色のコントラスト
文字と背景の明暗差を十分にとります。通常サイズの文字は 4.5:1 以上が目安。薄いグレーの文字は読みづらさの代表例です。
画像の代替テキスト
画像に alt 属性で説明を付けます。画面を読み上げて使う人にも、画像が表示されない時にも内容が伝わります。
キーボード操作
マウスなしで全ページを操作できること。Tab キーでリンクやボタンを順にたどり、Enter で実行できる状態を保ちます。
タップターゲットの大きさ
WCAG 2.2 の新基準。ボタンやリンクは最小 24×24 CSS ピクセル。指での誤タップを減らす実用的な指標です。
フォーカスの可視化
いま操作対象がどこかを枠などで明示します。2.2 の Focus Not Obscured は、その枠が他要素に隠れないことも求めます。
全基準を一度に満たそうとしなくて大丈夫です。この 5 つは影響が大きく、無料ツールでも多くを確認できます。まず色のコントラストと代替テキストから。1 か所直すごとに、取りこぼしていた誰かが使えるようになる。その積み重ねがアクセシビリティです。
5. タップターゲット 24×24px の実務
WCAG 2.2 の新基準のうち、中小企業サイトで最も実感しやすいのが Target Size (Minimum) です。Level AA で、操作できる要素は最小 24×24 CSS ピクセルを求めます。
これが効くのは、スマートフォンでの操作です。小さすぎるボタンや、行間に詰め込まれたテキストリンクは、指で正確に押せず誤タップを招きます。隣接する操作要素どうしの間隔が十分に空いている場合などの例外はありますが、基本は「指で押せる大きさを確保する」と覚えれば十分です。
実務上は、24×24px を最低ラインとしつつ、押しやすさを考えると余白を含めてもう少し大きく確保するのが現実的です。当サイトのボタンやリンクも、十分なタップ領域を持たせる方針で設計しています。詳しい設計の考え方は JSON-LD 構造化データ実装ガイドと同じく「機械にも人にも優しい」を軸にしています。
6. 無料ツールで始める検査の手順
アクセシビリティ検査は、専門家でなくても始められます。代表的な無料ツールに、ブラウザ拡張として使える axe DevTools や、Google Chrome に組み込まれた Lighthouse のアクセシビリティ監査があります。
手順はシンプルです。まず主要ページでツールを実行し、検出された問題を一覧で受け取る。色のコントラスト不足や代替テキストの欠落など、機械が見つけられる問題はここで多くが拾えます。次に、ツールでは判定できない部分を人の目で確認する。たとえばキーボードだけでフォームを最後まで操作できるか、代替テキストの内容が画像の意味を正しく表しているか。
ただし注意点があります。自動ツールはすべての問題を見つけられるわけではありません。ツールで「問題ゼロ」でも、実際には使いにくい箇所が残ることがあります。自動検査で土台を固め、最後は人の手で確かめる。この二段構えが、誰も取りこぼさないサイトへの現実的な道筋です。
よくある質問
- WCAG 2.2 はいつ勧告化されましたか?
- 2023 年 10 月 5 日に W3C 勧告となりました。WCAG 2.1 に対して達成基準が 9 個追加され、一方で 4.1.1 Parsing は廃止・削除されています。2.1 の基準はほぼそのまま 2.2 に引き継がれているため、2.2 への対応は 2.1 を土台にした積み増しになります。
- EAA に対応するには WCAG 2.2 が必須ですか?
- いいえ。これはよくある誤解です。EAA(欧州アクセシビリティ法)のウェブ技術基準は、整合規格 EN 301 549 を経由して WCAG 2.1 の Level AA です。2.2 ではありません。「EAA だから 2.2 必須」という説明は不正確なので注意してください。
- タップターゲットの最小サイズはいくつですか?
- WCAG 2.2 の新基準 Target Size (Minimum) は、Level AA で最小 24×24 CSS ピクセルを求めます。指で操作するボタンやリンクが小さすぎると、誤タップや操作の失敗が起きやすくなります。隣接する操作要素との間隔が十分に空いている場合などの例外もあります。
- 小さな会社のサイトでもアクセシビリティ対応は必要ですか?
- 必要です。アクセシビリティは障害のある人だけのものではありません。加齢で細かい文字が読みづらい人、屋外で画面が見えにくい人、片手がふさがっている人。誰もが一時的に「使いにくい状況」に置かれます。対応は特定の人のためではなく、取りこぼしを減らすための設計です。
- どこから手をつければよいですか?
- まず影響が大きく確認しやすい 3 点から始めます。文字と背景の色のコントラスト、画像の代替テキスト、キーボードだけで全ページを操作できるか。この 3 点は無料の検査ツールでも多くを確認でき、改善の効果も実感しやすい入口です。
関連記事
出典
- W3C, What's New in WCAG 2.2 — w3.org/WAI/standards-guidelines/wcag/new-in-22/
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2 — w3.org/TR/WCAG22/
- European Commission, European Accessibility Act — commission.europa.eu/.../european-accessibility-act-eaa_en
Free Diagnosis
あなたのサイトは、誰かを取りこぼしていませんか?
無料診断では、現状サイトの色のコントラスト・代替テキスト・キーボード操作・タップターゲットを点検し、WCAG の観点でどこを直すべきかをお見せします。発注前に「誰も取りこぼさない基準」を一緒に決めます。診断だけで終わっても費用は一切かかりません。
1 分で無料診断を申し込む