はじめに
この記事を開いていただきありがとうございます。
今回は、WCAG2.2の第3章「理解可能（Understandable）」について、わかりやすく解説します。
前回の記事：
目次
🔎 WCAGとは？
WCAG（Web Content Accessibility Guidelines）は、誰もがウェブコンテンツにアクセスしやすくするための国際的なガイドラインです。
WCAG 2.2は2023年10月にW3C勧告となり、**「知覚可能」「操作可能」「理解可能」「堅牢」**の4原則に基づいて構成されています。
今回はそのうちの**第3章「理解可能（Understandable）」**を解説します。
🧠 理解可能とは？
ユーザーが情報や操作を「理解できる」ようにすることがこの章の目的です。
つまり、コンテンツの読み方や使い方が分かりやすく、予測可能なものであることが求められます。
🧩 第3章の達成基準一覧
| 番号 | 達成基準 | レベル | 概要 |
|---|---|---|---|
| 3.1.1 | ページの言語 | A | ページの主要言語を指定する。lang属性など。 |
| 3.1.2 | 一部の言語 | AA | ページ内で他言語を使っている箇所には、その言語を指定する。 |
| 3.2.1 | フォーカス時 | A | フォーカスしても予期せぬ変化を起こさない。 |
| 3.2.2 | 入力時 | A | 入力によって自動でページ遷移などを行わない。 |
| 3.2.3 | 一貫したナビゲーション | AA | 同じUIは同じ順序で表示する。 |
| 3.2.4 | 一貫した識別性 | AA | 同じ機能には同じラベルや見た目を使う。 |
| 3.3.1 | エラーの特定 | A | 入力エラーがある場合、そのフィールドを特定する。 |
| 3.3.2 | ラベルまたは説明 | A | 入力項目にはラベルや説明を提供する。 |
| 3.3.3 | エラー修正の提案 | AA | 入力エラーの修正方法を提案する。 |
| 3.3.4 | エラー防止（法的/金銭的/データ） | AA | 送信前の確認や取消機能を提供する。 |
| 3.3.7 | アクセス可能な認証（★新） | A | 認知的負担の大きいパズル認証などを回避。 |
| 3.3.8 | アクセス可能な認証（拡張）（★新） | AAA | Aより高い水準で、認証をより柔軟に。 |
| 3.3.9 | ヘルプ（★新） | AAA | ヘルプやサポートを提供する。 |
| 3.3.10 | 再入力なし（★新） | AAA | フォームエラー時に再入力を求めないよう配慮。 |
※★印はWCAG 2.2で新しく追加された達成基準です。
💡 ポイント解説（注目の基準）
◆ 3.3.7 アクセス可能な認証（Level A）【新規追加】
従来の「CAPTCHA」など、視覚・聴覚・記憶・推論能力に負荷をかける手法は、多くのユーザーにとって困難です。
この基準では、**「パズルを解かせる」以外の認証手段（例：リンクメール認証、デバイス認証）**を用意することが求められます。
✅ 実装例
- 「私はロボットではありません」チェックボックスより、メール認証の方がアクセシブル。
- WebAuthn（パスキー認証）も対応。
◆ 3.2.3 一貫したナビゲーション（Level AA）
各ページのメニューやヘッダーなど、ナビゲーションの順序や配置を統一することで、ユーザーが迷わず操作できるようにします。
🛠 実装の工夫
- 共通パーツ（ヘッダー、サイドメニューなど）はテンプレートで統一。
- 順序が変わらないようCSSやJSでの動的変更に注意。
◆ 3.3.1 エラーの特定（Level A）
入力エラーが起きた際に、「どの項目にエラーがあるのか」明示的に示すことが重要です。
🚫 NG例
「エラーがあります」、「入力漏れがあります」だけの表示
✅ OK例
「メールアドレスが未入力です」
🧪 フォームに関する基準が多い理由
第3章ではフォーム関連の基準が特に多く見られます。
これは、ユーザーにとって**「情報を入力し、送信する操作」が最も難しい場面の一つ**だからです。
対応ポイント：
- エラーは目立つ色やアイコンで示す（視覚だけに頼らない）
- 入力例をプレースホルダーだけでなく説明文でも記載
- 入力補助ツールや自動入力機能も考慮する
📌 最後に
今回は、WCAG2.2の第3章「理解可能」についてまとめてきました。
何がエラーなのか、認証方法の多様化など、フォーム入力の場面に遭遇する内容が多く、ログイン画面や申し込み画面、新規登録画面など、さまざまな場面で反映できそうな内容だと思いました。
ここまで読んでいただきありがとうございました！