WCAG 2.2完全ガイド — 9つの新基準と実装方法 (2026)
🎯 WCAG 2.2とは？
WCAG 2.2は2023年10月5日に公開された最新のウェブアクセシビリティガイドラインです。WCAG 2.1に9つの新基準を追加し、モバイルアクセシビリティ、認知アクセシビリティ、ユーザー体験の向上に焦点を当てています。
重要: WCAG 2.2はWCAG 2.1および2.0と後方互換性があります。WCAG 2.1に準拠していれば、ほとんどの要件を満たしていますが、新しい基準に対応する必要があります。
WCAG 2.2 vs WCAG 2.1 — 何が変わったか？
| 特徴 | WCAG 2.1 | WCAG 2.2 |
|---|---|---|
| 合計基準数 | 78基準 | 87基準 (+9) |
| レベルA基準 | 30基準 | 33基準 (+3) |
| レベルAA基準 | 20基準 | 23基準 (+3) |
| レベルAAA基準 | 28基準 | 31基準 (+3) |
WCAG 2.2の9つの新基準 — 完全リスト
2.4.11 — フォーカス表示 (レベルAA) AA
意味: キーボードフォーカスインジケーターは非常に見やすくなければなりません。フォーカスインジケーターの最小面積は、フォーカスされたコントロールの周囲2px以上の面積が必要です。
/* WCAG 2.4.11に準拠したフォーカス表示 */
:focus {
outline: 3px solid #3b82f6;
outline-offset: 2px;
}
2.4.12 — フォーカス非表示防止 (レベルAA) AA
意味: 要素がキーボードフォーカスを受け取ったとき、他のコンテンツ（固定ヘッダーなど）によって完全に隠されてはいけません。
/* 固定ヘッダーがフォーカスを隠さないようにする */
html {
scroll-padding-top: 80px;
}
2.5.8 — ターゲットサイズ (レベルAA) AA
意味: タッチターゲット（ボタン、リンク）は少なくとも24x24 CSSピクセル以上でなければなりません。
/* ボタンを少なくとも24x24pxにする */
button, a, [role="button"] {
min-width: 24px;
min-height: 24px;
padding: 8px;
}
/* モバイルでは44x44を推奨 */
@media (max-width: 768px) {
button, a, [role="button"] {
min-width: 44px;
min-height: 44px;
}
}
2.5.7 — ドラッグ操作 AA
意味: ドラッグ操作が必要な機能には代替操作（アップ/ダウンボタンなど）も提供しなければなりません。
3.2.6 — ヘルプの一貫性 A
意味: ヘルプ機能（お問い合わせ、チャット）は全ページで同じ順序で配置しなければなりません。
3.3.7 — 重複入力の防止 A
意味: 以前に入力した情報は自動入力または簡単に選択できるようにしなければなりません。
3.3.8 — アクセシブル認証 AA
意味: 認証プロセスは記憶テストやパズルなどの認知機能テストに頼ってはいけません。
4.1.3 — ステータスメッセージ AA
意味: ステータスメッセージはフォーカスを移動させずにスクリーンリーダーに通知されなければなりません。
<div role="status" aria-live="polite">
{{ statusMessage }}
</div>
WCAG 2.2実装の優先順位
優先度1: ターゲットサイズ (2.5.8)
すべてのタッチターゲットを少なくとも24x24pxにします。
優先度2: フォーカス表示 (2.4.11)
キーボードフォーカスが非常に見えるようにします。
優先度3: フォーカス非表示防止 (2.4.12)
固定ヘッダーでフォーカスが隠れないようにします。
🚀 今すぐウェブサイトをWCAG 2.2にテスト
無料WCAGコンプライアンススキャン — WCAG 2.1および2.2基準を含む。
無料でスキャン開始 →登録不要。10秒で結果。WCAG 2.1/2.2対応。
日本におけるWCAG 2.2の法的状況
日本では、JIS X 8341-3がWCAG 2.0/2.1に準拠しています。WCAG 2.2はまだ公式に採用されていませんが、国際的なベストプラクティスとして推奨されています。
日本の企業も国際市場をターゲットにしている場合、WCAG 2.2への対応が求められることがあります。
無料アクセシビリティツール
- ADAチェッカー: 無料でテスト →
- PDFチェッカー: PDFをチェック →
- キーボードテスター: キーボードテスト →
- カラーコントラスト: コントラストをチェック →
- スクリーンリーダー: シミュレート →
👉 すべてのツール: All 11 Free Accessibility Tools →
よくある質問
🚀 WCAG 2.2コンプライアンスを今すぐテスト
無料WCAGコンプライアンススキャン — WCAG 2.1および2.2基準を含む。
無料でスキャン開始 →登録不要。10秒で結果。WCAG 2.2対応。
💬 Comments (0)