はじめに
この記事を開いていただきありがとうございます。
今回の記事では、WCAG2.2のまとめとして、ポイントを絞って紹介していきたいと思います。
1. 知覚可能（見える・聞こえる・読み取れる）
例1｜画像の説明
- Before：製品写真に説明がなく、何の画像か伝わりにくい
- After：「黒い13インチのノートPC。開いた状態」など、短い一文をそっと添える
- 確認してみる：説明だけ読んで、どんな画像かだいたい想像できるか
例2｜グラフだけのレポート
- Before：折れ線グラフの画像だけが並んでいる
- After：すぐ下に要点のひとこと（例：「Q2は前年比18％増。いちばん高いのは6月」）
- 確認してみる：グラフを見なくても、文章だけで要点がつかめるか
例3｜動画・音声の補助
- Before：紹介動画に字幕がない
- After：字幕をつけ、重要な音はひとこと説明（例：「チャイム音＝完了」）
- 確認してみる：音を消しても、内容を追えるか
例4｜色だけのエラー表示
- Before：エラーを赤色だけで示している
- After：色にくわえて文章で理由もそえる（例：「メールアドレスを入力してください」）
- 確認してみる：白黒で見ても、どこをどう直せばよいか分かるか
2. 操作可能（どんな操作でも使える）
例5｜フォーカスがヘッダーに隠れる
- Before：Tabで移動中、固定ヘッダーの下にリンクが完全に隠れてしまう
- After：フォーカス中の要素がいつも見える位置まで画面がそっと動く
- 確認してみる：Tab / Shift+Tabで移動して、一瞬でも完全に隠れないか
例6｜見失いやすいフォーカス
- Before：うっすらした影で、今どこにいるか分かりにくい
- After：背景としっかり区別できるはっきりした見た目（少し太め・周囲と離す など）
- 確認してみる：少し離れて画面を見ても、今どこかが分かるか
例7｜ドラッグ必須のUI
- Before：並べ替えやスライダーがドラッグだけで動く
- After：「上へ/下へ」ボタンや数値入力など、もう一つの方法も用意しておく
- 確認してみる：マウスがなくても、キーボードだけやタッチだけで同じ操作ができるか
例8｜押しにくいタップ領域
- Before：スマホの「×」アイコンが小さくて押しづらい
- After：指で押しやすい大きさ（目安：24×24程度）か、周りの余白を気持ち多めにとる
- 確認してみる：親指で一回で押せるか、隣のボタンに触れにくいか
例9｜突然のタイムアウト
- Before：一定時間で急にログアウト、入力内容が消えてしまう
- After：事前にお知らせが出て、延長や自動保存で続けられる
- 確認してみる：「あと◯分で終了します」の表示があり、延長できるか
3. 理解可能（表示・挙動がわかりやすい）
例10｜選ぶだけでページが切り替わる
- Before：セレクトで項目を選んだだけで、すぐ画面が変わる
- After：決定ボタンを押すまで遷移しない
- 確認してみる：「選ぶ」は準備、「決定」は実行という流れが守られているか
例11｜ヘルプの場所が毎回ちがう
- Before：問い合わせやヘルプの位置がページごとにばらばら
- After：いつも同じ場所（例：右上）に置いて迷わないように
- 確認してみる：3ページほど見比べて、同じ位置にあると言えるか
例12｜同じ情報を二度書く
- Before：請求先と配送先で住所を2回入力
- After：「配送先も同じ」にチェックできたり、自動入力で再入力を減らす
- 確認してみる：一度入れた情報をその場で呼び出して再利用できるか
例13｜ちょっとたいへんな認証
- Before：歪んだ文字のCAPTCHAや、コピペ不可のパスワード欄
- After：パスワード管理アプリやコピペが使えるようにして、覚える作業に頼らない方法も用意
- 確認してみる：覚える量が少なく、やり直しも少なくできているか
例14｜分かりにくいエラーメッセージ
- Before：「無効な値です」だけで、何を直せばよいか不明
- After：「郵便番号は7桁、数字のみで入力してください」など、直し方まで一言そえる
- 確認してみる：初めての人でも、文を読めばすぐ直せるか
4. 堅牢（機械にも分かる・支援技術と仲よく）
例15｜カスタムスイッチの状態が伝わらない
- Before：見た目はスイッチでも、読み上げでは何か分からない
- After：「通知：オン／オフ」のように、部品の名前と今の状態がきちんと伝わる
- 確認してみる：フォーカスすると、名前と状態が読み上げられるか
例16 通知が見た目だけ
- Before：「保存しました」の表示が出るだけで、読み上げには届かない
- After：読み上げでもステータスが伝わる（成功・失敗など）
- 確認してみる：操作後に、追加のメッセージを読んでくれるか
まとめ
- フォーカスは消さない・隠さない（固定ヘッダーやモーダルはとくに注意）
- 見失わないフォーカスにする（少し太め・背景とほどよく離す など）
- ドラッグ以外の操作も1つ用意しておく（上/下ボタン、数値入力 など）
- スマホで一回で押しやすい大きさか、余白をとってタップしやすく
- 画像は意味があれば短い説明、飾りなら説明なしでOK
- 動画は字幕、音声は文字起こしを基本セットに
- 色だけに頼らない（文章や形でも伝える）
- 同じ情報をくり返し入れなくてよい流れに（再利用・自動入力）
- がんばって覚える認証に頼りすぎない（コピペや管理アプリOK）
- カスタムUIの名前/状態と通知が、読み上げにもちゃんと届くように
最後に
今回はWCAG2.2のまとめとして、ポイントを絞って紹介してきました。
始められるところからぜひ実装に反映してより多くの人が使いやすいサイト構築のきっかけになれば嬉しいです。
ここまで読んでいただきありがとうございました！