先生と生徒の会話形式で理解しよう

生徒

「フォームでエラーが出たとき、赤い文字を出しておけば大丈夫ですか？」

先生

「見た目だけだと、伝わらない人もいます。」

生徒

「えっ、赤く表示されていれば分かると思ってました。」

先生

「画面を見られない人や、音声で操作している人には、別の伝え方が必要なんです。」

1. エラーメッセージがアクセシビリティで重要な理由

エラーメッセージとは、入力ミスや不足があったときに、利用者に知らせるための案内文です。 Webサイトでは、会員登録やお問い合わせなど、フォーム入力の場面でよく使われます。

もしエラーメッセージが分かりにくいと、利用者は「何が間違っているのか」「どう直せばいいのか」が分かりません。これは非常にストレスになります。

アクセシビリティでは、エラーを具体的に、 すぐに、 誰にでも伝わる形で伝えることが大切です。これは初心者にもプロにも共通する基本です。

2. 良くないエラーメッセージの例

初心者がやりがちな失敗として、「入力内容が正しくありません」という一文だけを表示するケースがあります。

この文章では、どこが間違っているのか、何を直せばよいのかが分かりません。例えるなら、テストで「不正解」とだけ言われるようなものです。


<div class="alert alert-danger">
    入力内容が正しくありません
</div>

ブラウザ表示

見た目は赤くて目立ちますが、情報としては不十分です。これでは利用者を助けることができません。

良いエラーメッセージは、「何が」「どこで」「どうすればよいか」を伝えます。専門用語を使わず、普通の言葉で説明することが重要です。

たとえば、メールアドレスが未入力なら、その事実をそのまま伝えます。利用者はすぐに次の行動が分かります。


<div class="alert alert-danger">
    メールアドレスが入力されていません。入力してください。
</div>

ブラウザ表示

このように具体的に書くだけで、利用者の迷いは大きく減ります。これはアクセシビリティだけでなく、ユーザー体験の向上にもつながります。

エラーは、できるだけ早く伝える必要があります。送信ボタンを押してから画面の一番上にだけ表示されると、気づかれないことがあります。

Bootstrapでは、入力欄の近くにエラーメッセージを表示することで、どこを直せばいいのかが分かりやすくなります。


<input type="text" class="form-control is-invalid">
<div class="invalid-feedback">
    この項目は必須です。
</div>

ブラウザ表示

入力欄と一緒に表示されることで、初心者でも直す場所がすぐに分かります。これが「即時に伝える」工夫です。

支援技術とは、画面を音声で読み上げる機能など、パソコン操作を助ける仕組みのことです。

色だけでエラーを表現すると、音声では伝わりません。そのため、文章として意味が通るエラーメッセージが必要です。

Bootstrapのclassを使いながら、文章そのものを丁寧に書くことで、支援技術を使う人にも内容が伝わります。見た目と意味の両方を意識することが大切です。

実務では、エラーメッセージを「利用者への案内文」と考えます。怒るのではなく、助ける文章を書く意識が重要です。

具体的で、すぐに気づけて、誰にでも伝わる。この三つを意識するだけで、エラーメッセージの質は大きく向上します。

Bootstrapは表示を整える強力な道具ですが、伝える内容までは自動で作ってくれません。だからこそ、文章を書く力がアクセシビリティでは重要になります。