この記事でわかること

  • 入力エラーについて、W3CのWCAGが決めている2つの基準
  • どの項目がなぜ違うのかを、文字で伝える書き方
  • 直し方の例を添えるときの3つの形
  • フォームにわざとまちがえて入力し、知らせ方を確かめる手順

問い合わせや申し込みのフォームで送信を押したのに、同じ画面に戻されて、どこが悪いのか分からなかったことはないでしょうか。まちがえた欄を赤くするだけでは、色の見分けにくい人や、画面を読み上げて使う人には伝わりません。この記事では、入力エラーを分かりやすく伝えるための書き方と確かめ方を、W3Cのアクセシビリティの基準WCAGに沿ってまとめます。

根拠にしたのは、W3Cが公開しているWCAG 2.2の本文と、2つの達成基準の解説、エラーの知らせ方の技法のページです。2026年10月24日に読んだ版をもとにしています。法律の決まりと、特定のツールやスクールの紹介は扱いません。入力欄の項目名や説明の付け方は、Webデザインで入力フォームのラベルと説明を分かりやすくする方法にまとめています。

先に結論: どの項目が、なぜ違うかを文字で伝える

先に結論を書くと、エラーがあった項目の名前と、何が違うのかを文字で示し、分かるなら直し方の例も添えます。色や印は、文字に加えて使います。 よくある伝え方を判断すると、次のとおりです。

伝え方 判断
赤い枠だけ 足りない
項目名と理由 必要
直し方の例 添える
入力を残す 残す
色も添える よい

入力エラーに関わるWCAGの2つの基準

WCAG 2.2には、入力エラーについて次の2つの達成基準があります。

  • 達成基準3.3.1(レベルA、Error Identification): 入力エラーを自動で見つけたときは、エラーのある項目を示し、そのエラーを文字で説明する
  • 達成基準3.3.3(レベルAA、Error Suggestion): 入力エラーを自動で見つけ、直し方の案が分かっているときは、その案を示す。ただし、安全や内容の目的をそこなう場合は除く

W3Cの解説では、入力エラーとして、ページが求めているのに入力されなかった情報と、入力されたものの求める形式や許される値から外れている情報を挙げています。郵便番号として存在しない番号、未来の生年月日、数字だけの電話番号の欄に入れた文字などが例です。

項目と理由を文字で示す

達成基準3.3.1の解説では、送信がうまくいかなかったときに、失敗したことを何も示さずにフォームを出し直すだけでは足りず、エラーは文字で示す必要があるとしています。目の見えない人、見えにくい人、色の見分けが難しい人も、文字ならエラーが起きたことに気づけます。

色や文字の飾りでエラーを示すこと自体は、問題ありません。解説でも、文字の説明に加えて、画像や色などで示すのはかまわないとしています。2つの欄を入れ忘れたときに、文字で説明したうえで、欄を黄色で目立たせる例も挙げられています。

エラーをどこに出すかは、基準では決めていません。フォームの前にまとめる、項目のすぐそばに出す、知らせの画面に並べる、のどれでもよく、文字で伝えることだけが求められています。

直し方の案を示す

達成基準3.3.3の解説では、エラーがあることは分かっても、どう直せばよいか分からず、フォームの入力をやめてしまう人がいるとしています。W3Cの技法G85では、エラーの文で、次のどれかを行うとしています。

  1. 正しい入力の例を示す
  2. 正しい入力の形を説明する
  3. 入力に近い正しい値を示す: 示した値の選び方も一緒に書く

解説では、「Email is not valid」(メールアドレスが正しくない)は達成基準3.3.1を満たし、「『名前@ドメイン名』の形で入力してください」のように直し方まで書けば、3.3.3も一緒に満たせるとしています。月の名前を入れる欄に「12」と入れた人に、選べる月の一覧を見せたり、「December のことですか」とたずねたりする例もあります。

ブラウザの標準の知らせだけに任せない

HTMLの入力欄の決まりを使うと、ブラウザが送信を止めて、標準のエラーの知らせを出します。W3Cの解説では、これで達成基準3.3.1は満たすものの、次の弱点があるとしています。

  • ブラウザによっては、知らせがすぐ消えたり、ページと一緒に動かなかったりする
  • 画面を拡大しても、知らせの文字は大きくならないことがある
  • 知らせの内容が大まかで、達成基準3.3.3を満たすほどの直し方を示さないことがある
  • エラーがいくつあっても最初の1件しか出ず、直して送り直すたびに次の1件が出る

手順: わざとまちがえて送信し、知らせを確かめる

W3Cの技法G83・G85の確かめ方をもとに、次の順で確かめます。

  1. 必須の欄を空にして送信する: エラーのあった欄の名前が文字で示されるかを見ます
  2. 形式に合わない値を入れて送信する: 欄の名前に加えて、何が違うのかと直し方が文字で示されるかを見ます
  3. ほかの欄の入力が残っているかを見る: パスワードのように、残すと安全上よくない欄は除きます
  4. 知らせから欄へ移れるかを見る: まとめて出す場合は、知らせから該当する欄へ移れると探しやすくなります

次のHTMLは、送信の後にフォームの上でまとめて知らせ、項目のそばにも同じ内容を書く例です。エラーの文の書き方を示す見本で、実行するコマンドではありません。サイトのフォームを書き換えるときは、直す前のファイルを写して残しておきます。

<!-- フォームの上: 件数と、欄ごとの理由・直し方をまとめて知らせる -->
<div role="alert">
  <p>入力に2件の誤りがあります。</p>
  <ul>
    <li><a href="#email">メールアドレス: 「@」がありません。例: name@example.com</a></li>
    <li><a href="#tel">電話番号: 数字だけで入力してください。例: 0312345678</a></li>
  </ul>
</div>

<!-- 欄のそば: 同じ内容を文字で書く -->
<label for="email">メールアドレス(必須)</label>
<input id="email" type="email" value="name.example.com">
<p>「@」がありません。例: name@example.com</p>

role="alert"は、W3Cの技法ARIA19(role=alertなどでエラーを示す方法)で扱われている属性です。技法G83・G85では、ARIA19と組み合わせると、状態の知らせの基準(達成基準4.1.3)も満たせるとしています。

自分で直すか、相談するかの判断

判断の目安は、「エラーの文と、出す場所を変えるだけで済むか」です。「入力に誤りがあります」だけの文に欄の名前と直し方を足す、赤い枠に文字の説明を添える、といった直し方なら、自分で直してから、わざとまちがえてもう一度確かめます。

入力の確かめをサーバーで行っていて、エラーで戻すと入力が消える場合や、外部のフォームのサービスを使っていて文を変えられない場合は、仕組みから直す必要があります。確かめた結果を持って、サイトを作った人や、Webデザインを教えている人に、どこで文を決めているかを聞きます。

つまずきやすいところ

  • 色だけでエラーを示す: 赤い枠や赤い文字だけでは、色の見分けにくい人に伝わりません。色の使い方の確かめ方は、Webデザインで文字と背景のコントラストを確かめる方法で紹介しています
  • エラーに気づかれない: W3Cの技法G83では、エラーが起きたことに気づかず、フォームが壊れていると思う人がいるため、知らせを出すことを望ましいやり方としています。ページのタイトルにエラーの知らせを入れることも挙げています
  • 送り直すたびに入力が消える: 技法G83・G85の確かめ方では、ほかの欄に入れた内容が残っているかを確かめるとしています
  • 知らせから欄へ移れない: まとめて知らせたときに欄へのリンクがないと、キーボードで操作する人は欄を探して戻ることになります。キーボードでの確かめ方は、Webデザインでキーボードだけで操作できるかを確かめる方法で紹介しています

まとめ

  • エラーのあった欄の名前と、何が違うのかを文字で示します。色や印は、文字に加えて使います
  • 直し方が分かるときは、正しい入力の例や形を添えます
  • ブラウザの標準の知らせだけに任せず、内容と出し方を自分で決めます
  • わざと空欄や形式の違う値で送信し、文字の説明と入力が残るかを確かめます