問い合わせフォームのアクセシビリティを自分でチェック。WCAG 2.2 で増えた6つの確認

公開 2026.11.01読了まで約12分

( この記事の要点 )

2024年4月から事業者の義務になったのは合理的配慮の提供で、ホームページを前もって整えるのは努力義務
WCAG 2.2 で増えた A と AA の6つの基準は、どれも問い合わせや予約のフォームで確かめられる
Tab キー、スマートフォンの指、エラーのときの入力、貼り付けで確かめ、基準の番号を添えて制作会社に伝える

( Contents ) — 13

ホームページの問い合わせや予約のフォームは、お客様が最後に通る入口です。ここで入力欄が見えなくなったり、ボタンが押しにくかったりすると、せっかく来てくれた人が、連絡をあきらめてしまうかもしれません。

ウェブアクセシビリティ（障害のある人や高齢の人を含め、誰でもホームページを使えるようにすること）の国際的な基準は、今の最新版が WCAG 2.2 です。この版で新しく増えた基準のうち6つは、フォームの使いやすさに直接かかわります。この記事では、その6つを、ホームページの専任者がいない会社でも、パソコンとスマートフォンで確かめる方法をまとめました。

先に整理：法律で「義務」になったこと、なっていないこと

「ウェブアクセシビリティが義務化された」という説明を見かけますが、正確ではありません。2024年4月1日に施行された改正障害者差別解消法で、事業者に義務づけられたのは「合理的配慮の提供」です。ホームページを前もって使いやすくしておくことは「環境の整備」にあたり、努力義務です。

区分	中身	事業者の扱い
合理的配慮の提供	障害のある人から、バリアを取り除くための対応を求める意思が示されたとき、負担が重すぎない範囲で対応する	義務（2024年4月1日から）
環境の整備	不特定多数の障害のある人を主な対象に、前もって改善しておく。情報アクセシビリティの向上も例に挙がっている	努力義務

努力義務だから何もしなくてよい、ということではありません。フォームを前もって使いやすくしておけば、「フォームが使えないので別の方法で申し込みたい」という申し出を減らせることがあり、ほかのお客様にとっても申し込みやすくなります。

WCAG・ISO・JIS の関係

WCAG 2.2：ウェブの標準を決める W3C が、2023年10月5日に勧告した基準です。今の版は2024年12月12日付です。
ISO/IEC 40500:2025：WCAG 2.2 と同じ内容の国際規格として、2025年に発行されました。
JIS X 8341-3：日本の規格で、最新は2016年版です（WCAG 2.0 と技術的に同等）。改正が予定されていて、ウェブアクセシビリティ基盤委員会（WAIC）は「スムーズにいけば2027年、遅くとも2028年」の改正を予定と説明しています。

JIS の改正を待つ必要はありません。WAIC が公開している WCAG 2.2 の日本語訳は、2026年6月8日に全体の訳が見直されました。この記事の基準の名前も、その日本語訳に合わせています。

WCAG 2.2 で増えた基準のうち、フォームにかかわる6つ

WCAG 2.2 では、新しい達成基準（守れているかを判断する項目）が9つ増えました。レベルは A（最低限）、AA（A の上の段階）、AAA（より高い段階）の3つで、増えた9つのうち A が2つ、AA が4つ、AAA が3つです。また、古い基準の「4.1.1 構文解析」は削除されました。

A と AA の6つは、どれもフォームで確かめられます。

確認	基準（WAIC の日本語訳）	レベル	フォームで見る所
①	2.4.11 隠されないフォーカス (最低限)	AA	キーボードで選んだ入力欄が、ほかの表示に隠れないか
②	2.5.7 ドラッグ動作	AA	引きずる操作をしないと選べない部品がないか
③	2.5.8 ターゲットのサイズ (最低限)	AA	ボタンやチェックボックスが小さすぎないか
④	3.2.6 一貫したヘルプ	A	電話番号などの問い合わせ先が、ページごとに同じ順番にあるか
⑤	3.3.7 冗長な入力項目	A	同じ手続きの中で、同じことを2回入力させていないか
⑥	3.3.8 アクセシブルな認証 (最低限)	AA	パスワードや確認コードを、貼り付けや自動入力で入れられるか

6つは、フォームを使うときの動作で3つに分けると覚えやすくなります。

見つける：① 入力欄が隠れない、④ 問い合わせ先がそろっている
押す・選ぶ：② ドラッグせずに選べる、③ 押しやすい大きさ
入力する：⑤ 同じことを2回入力させない、⑥ 貼り付けで入力できる

「見つける」「押す・選ぶ」「入力する」の3つの縦長の形が矢印で左から右へつながる図。それぞれの中に確認の番号 1と4、2と3、5と6。最後の「入力する」だけが水色と緑ににじんでいる — フォームを使う順に、見つける、押す・選ぶ、入力するの3つの動作で確かめます。最後まで入力できて、はじめて問い合わせが届きます。

パソコンとスマートフォンでできる6つの確認

ここで扱うのは WCAG 2.2 で増えた点です。入力欄の名前（ラベル）や必須の表示、エラーの伝え方など、以前の版からある基本の確認は別にあります。

用意するのは、キーボードのあるパソコンと、ふだん使っているスマートフォンだけです。自社の問い合わせフォームと予約フォームを開いて、上から順に試します。気づいたことは、どのページのどの欄かをメモしておくと、あとで制作会社に伝えやすくなります。

① Tab キーで進んで、入力欄が隠れないか（2.4.11）

マウスを使わない人は、Tab キーで入力欄やボタンを順に選びます。そのとき、選ばれている欄が見えなくなると、どこを入力しているのか分からなくなります。

パソコンでフォームを開き、マウスから手を離して、Tab キーを押していきます。
選ばれた欄に付く枠（フォーカスの印）を目で追い、最後の送信ボタンまで進みます。
画面の上や下に固定された帯（メニュー、Cookie の同意の表示、チャットの窓など）の下に、選ばれた欄がすっかり隠れてしまう所がないかを見ます。

AA では、一部が隠れるだけなら不合格にはなりません。完全に隠れるときは直しが必要です。そもそも枠が見えない場合は、別の基準（フォーカスが見えるかどうか）の問題なので、あわせて制作会社に伝えます。

② ドラッグしないと選べない部品がないか（2.5.7）

手のふるえがある人や、マウスを細かく動かせない人には、押したまま引きずる操作（ドラッグ）が難しいことがあります。予約の日付、人数、予算などを、つまみを左右に動かす部品（スライダー）でしか選べない所がないかを見ます。

こうした部品があれば、ドラッグのほかに、押すだけで選べる方法（つまみの通り道を押すとそこへ動く、数字を入力できる、「＋」「－」のボタンがあるなど）があるかを確かめます。ドラッグせずに、押すだけで同じことができれば、この基準は満たせます。

写真の添付を、ファイルを枠へ引きずって入れる方法だけにしている場合については、W3C の解説に記載がありません。「ファイルを選ぶ」のボタンも置いておけば、ドラッグが難しい人も迷わずに済みます。

③ ボタンやチェックボックスが小さすぎないか（2.5.8）

暗い地に小さな灰色の点が細かく並び、その真ん中だけ点がなく、周りに余白をとった大きな丸が1つ、水色と緑ににじんでいる — 小さく詰まった点の中で、余白のある大きな丸だけが指で押しやすいことを表したイメージです。

押す場所（ターゲット）は、24×24 CSS ピクセル以上の大きさにするのが基準です（例外は後で説明します）。CSS ピクセルは画面の表示の単位で、実際の長さは画面によって変わります。

スマートフォンでフォームを開き、拡大せずに、チェックボックス、ラジオボタン（1つだけ選ぶ丸い印）、閉じるの「×」、送信ボタンを、指で押してみます。
隣の項目を押してしまう、何度か押し直さないと反応しない、という所をメモします。
大きさを正確に知りたいときは、制作会社に「押す場所が24×24 CSS ピクセル以上あるか」を聞きます。

小さくても、周りに十分な間隔があれば合格になる、という例外があります。文章の途中のリンクや、ブラウザの標準の見た目のままの部品も対象外です。「同意する」のチェックボックスは小さく作られがちなので、文字の部分を押しても選べるようにしておくと、押しやすくなります。

④ 問い合わせ先の並び順が、ページごとにそろっているか（3.2.6）

困った人は、電話番号、問い合わせのページへのリンク、よくある質問などを探します。ページによって置き場所が変わると、見つけにくくなります。

トップページ、サービスのページ、フォームのページを見比べ、電話番号や「よくある質問」へのリンクが、ほかの内容に対して同じ順番に並んでいるかを確かめます。
フォームのページだけ、ヘッダーやフッターが違う作りになっていないかも見ます。

この基準は、ヘルプを新しく作ることまでは求めていません。すでに複数のページに置いているものの、並び順をそろえる基準です。

⑤ 同じことを2回入力させていないか（3.3.7）

左の紙に灰色の3行があり、矢印の先の右の紙では、同じ3行がアーチの形の水色と緑のにじみの上にすでに入っている。どちらの紙にも、その下に薄い灰色の行が2本ある — 前の画面で入力した内容が、次の画面に引き継がれる様子を表したイメージです。

同じ手続きの中で、前に入力した情報をもう一度求めるときは、自動で入っているか、選ぶだけで済む必要があります。記憶に負担がかかる人や、入力に時間がかかる人のための基準です。

フォームにわざと入力漏れを作って送信し、エラーで戻ったときに、ほかの欄の入力が消えていないかを見ます。
確認の画面がある場合は、「戻る」で入力の画面に戻ったときに入力が残っているかも、あわせて見ておくと安心です。
予約や注文で、申込者と連絡先、請求先と届け先など、同じ住所や名前を2回入力させる所がないかを見ます。「上と同じ」のチェックで済めば大丈夫です。

ブラウザの自動入力の機能があるだけでは、この基準を満たしたことになりません。サイトの側で、前の入力を残す作りにします。一方、日をあらためて来た人の入力まで保存しておく必要はありません。

⑥ パスワードや確認コードを貼り付けられるか（3.3.8）

ログインや確認コードのない問い合わせフォームでは、この確認は当てはまりません。会員のログインや本人確認で、パスワードやメールで届く確認コードを使うフォームでは、覚えたり書き写したりすることを求めない作りが必要です。

パスワードの欄に、コピーした文字を貼り付けられるか。ブラウザやパスワード管理のアプリで、自動で入れられるか
メールやショートメッセージで届いた確認コードを、貼り付けられるか
ゆがんだ文字を読み取って入力させる画像の認証（CAPTCHA）に、別の方法が用意されているか

貼り付けや自動入力を止める作りは、この基準を満たせません。なお、写真の中から「車」などの物を選ぶ形式の認証は、AA では例外として認められています（AAA では認められません）。CAPTCHA がすべて使えないわけではない点に注意してください。

見つかったときの直し方と、制作会社への伝え方

気づいた所は、直し方まで自分で決める必要はありません。「どのページの、どの欄で、何が起きたか」と、基準の番号を添えて伝えれば、制作会社は直し方を考えられます。

見つかったこと	伝え方の例
① 固定の帯の下に入力欄が隠れる	「Tab キーで進むと、下の Cookie の表示に〇〇の欄が隠れます（WCAG 2.2 の 2.4.11）」
② スライダーでしか選べない	「人数をドラッグせずに選べる方法を足してください（2.5.7）」
③ チェックボックスが押しにくい	「同意のチェックの押す場所を24×24 CSS ピクセル以上にしてください（2.5.8）」
④ 問い合わせ先の並び順が違う	「フォームのページでも、電話番号をほかのページと同じ順番に置いてください（3.2.6）」
⑤ エラーで入力が消える	「エラーで戻ったときも、入力した内容を残してください（3.3.7）」
⑥ 確認コードを貼り付けられない	「確認コードの欄で貼り付けを使えるようにしてください（3.3.8）」

すべてを一度に直せないときは、問い合わせと予約のように、お客様との接点になるフォームから順に進めます。新しくホームページを作る、または作り直すときは、見積もりの段階で「WCAG 2.2 の A と AA を目標にしたい」と伝えておくと、あとから直す手間を減らせます。

まとめ

WCAG 2.2 で増えた6つの基準は、どれも「入力欄が見える」「押しやすい」「迷わず連絡できる」「何度も入力させない」という、フォームの使いやすさの基本です。障害のある人だけでなく、スマートフォンで片手で入力する人や、急いでいる人にとっても助けになります。まずは自社の問い合わせフォームを開いて、①から順に試してみてください。

アクセシビリティの全体像を知りたいときは、デジタル庁の「ウェブアクセシビリティ導入ガイドブック」が入門に向いています。

確かめた結果の見方や、直し方の進め方に迷ったときは、MODS BASE にご相談ください。