最近、Web制作や運用の現場で「WCAG 2.2」という言葉を目にする機会が増えていませんか?
WCAG 2.2とは、Webサイトを誰もが使いやすくするための「Webアクセシビリティ」に関する国際的な最新ガイドラインです。
法改正などの影響もあり、「対応が必要」という話は耳にするものの、実際のお客様からは……
- 「自社サイトのどこが引っかかるのか分からない」
- 「制作会社にどこまで指示を出せばいいのか手探り状態」
というご相談をよくいただきます。JIS規格(JIS X 8341-3)の改正に向けた動きも進む中、本記事では「概要を押さえつつ、検査・診断の現場で実際に指摘することが多いポイント」を解説します。
JIS規格(JIS X 8341-3)とWCAG 2.2の違い
- JIS X 8341-3:2016(現在の規格)
旧規格(WCAG 2.0)がベースのため、スマホ特有の操作(タップやスワイプ)や、近年の複雑なログイン認証への配慮が一部不足しています。 - WCAG 2.2(最新規格)
スマホでの誤タップ防止や、ログイン時の認知的負担軽減などが強化されています。
診断現場からのTips
既存サイトを全面的に改修する前に、まずは「新規作成するページ」からWCAG 2.2基準を取り入れていくのが、将来的な不適合を減らす最も効率的なアプローチです。
WCAG 2.2で追加された要点と「検査でよく見かける不適合例」
新しく追加された基準から、実際の診断・検査現場で「不適合(指摘事項)」になりやすい6つのポイントです。
①フォーカスが隠れない工夫(フォーカス非隠蔽)
キーボード操作時、選択中の要素(フォーカス)が画面上の固定UI(ヘッダー・フッター・チャットボットなど)の裏に完全に隠れてしまわないよう設計します。
「問い合わせフォームなどでTabキーを押して順番に入力欄を移動していくと、画面右下に常駐しているチャットボットや、画面上下の固定ヘッダー・フッターの裏に入力欄がすっぽり潜り込んでしまい、完全に視認できなくなっている」という不適合が多く見られます。
②ドラッグ操作以外の代替手段(ドラッグ移動)
スライダーや要素の並び替えなど、ドラッグ&ドロップが必要な機能は「ワンタップ(クリック)」でも操作可能にします。
スマホ用UIで「指でスライドさせる」操作しか用意されていない画像ギャラリーなどが不適合となります。「前へ/次へ」ボタンの併設が必要です。
③ボタンの大きさ・間隔確保(ターゲットの最小サイズ)
誤タップを防ぐため、タップできる領域は原則24×24px以上(または十分な余白)を確保します。
「見た目のデザイン(16pxの小さなアイコン)」だけを基準にしてしまい、クリック可能領域まで小さくなっていて不適合判定になるケースが後を絶ちません。特に、カルーセルの現在位置を示すスライドインジケーターや、ページ切り替えの番号(ページネーション)などで問題が多く見つかります。
④ヘルプ位置の統一(一貫したヘルプ)
問い合わせやチャットボットの配置場所を全ページで揃えます。
「トップページでは画面右下にチャットボットがあるのに、下層ページに行くとヘッダー内にしか問い合わせリンクがない」といった、ページごとのコンポーネント配置の不揃いがよく指摘対象になります。
⑤手入力の手間削減(冗長な入力の削減)
一度入力した住所や名前などを、同じフォーム内で何度も手入力させない仕組みにします。
「注文者情報(購入者)」と「お届け先」を別々に選択させる画面で、「注文者と同じ住所を入力する」といったチェックボックスや自動引き継ぎの仕組みが用意されておらず、手戻りの指摘になるケースが多いです。
⑥ログインの簡便化(簡便な認証)
複雑なパズル認証や記憶頼みのログインを避け、パスワードマネージャーの自動補完やコピペを許可します。
「画像の中から信号機を選ぶ」「簡単な足し算を解かせる」といった従来の認証(CAPTCHA)をそのまま使っているサイトが非常に多く、WCAG 2.2ではこれらが明確な不適合判定となります。代替手段(パスキーやメール送信型のワンタイムコードなど)への切り替えが必要です。パスワード入力欄では、コピー&ペーストやパスワードマネージャーによる自動入力を妨げないようにしてください。
WCAG2.2対応で挫折しないための進め方
一番やってはいけないのが「いきなり全ページ修正しようとすること」です。コストも時間も膨らんで社内調整が頓挫します。
コツは、「トップページ+主要なページ+問い合わせフォームの10ページ前後」に絞って簡易チェックを行い、そこでの不適合パターンを自社の「改修ルール」として制作会社に共有すること。まずは範囲を絞って小さく始めるのが成功の近道です。
自社内での対応や判断が難しい場合は、サポートサービスを活用するのもおすすめです。
