ラベルとinputの正しい関係

お問い合わせフォームで最も重要なアクセシビリティ対応が、ラベル（<label>）と入力欄（<input>）の正しい紐付けです。ラベルと入力欄が関連付けられていると、スクリーンリーダーが「会社名入力欄」のように読み上げ、ユーザーが何を入力すべきかを理解できます。また、ラベルをクリックすると対応する入力欄にフォーカスが移るため、マウス操作でもクリック範囲が広がり使いやすくなります。

正しい紐付け方（for属性とid属性を一致させる）：

<!-- ✓ 正しい例：forとidが一致している -->
<label for="company">会社名</label>
<input type="text" id="company" name="company">

<!-- ✗ 悪い例：labelとinputが関連付けられていない -->
<span>会社名</span>
<input type="text" name="company">

プレースホルダー（placeholder属性）はラベルの代わりになりません。入力を始めると消えてしまい、入力済みの状態では何を入力したか確認できなくなります。ラベルは常に入力欄の外に表示し続けてください。

必須・任意の明示方法

フォームの送信でよくあるトラブルが「どの項目が必須か事前にわからない」問題です。必須項目には「※必須」や「Required」を視覚的に明示し、スクリーンリーダー向けに required 属性も付与します。

<label for="email">
  メールアドレス
  <span aria-hidden="true">※必須</span>
</label>
<input type="email" id="email" name="email" required
       aria-required="true">

任意項目には「（任意）」と記載します。必須項目だけに「※」マークを付けて、任意項目には何も付けない方式が一般的ですが、フォームの項目が多い場合は任意にも明示すると親切です。

エラーメッセージの設計

送信エラーが発生したとき、多くのサイトで「入力内容を確認してください」という漠然したメッセージが表示されます。これはアクセシビリティ上も、UX上も不十分です。

良いエラーメッセージの3条件：

エラーの場所が明確：どのフィールドにエラーがあるか、視覚的にもスクリーンリーダー的にも伝わること
原因がわかる：「入力してください」ではなく「メールアドレスの形式が正しくありません（例：info@example.com）」のように具体的に
修正方法が示される：ユーザーが自力で修正できる情報を含める

<!-- エラー時のマークアップ例 -->
<label for="email">メールアドレス</label>
<input type="email" id="email" aria-describedby="email-error"
       aria-invalid="true">
<p id="email-error" role="alert">
  正しいメールアドレスを入力してください（例：info@example.com）
</p>

aria-describedby でエラーメッセージをフィールドに関連付け、role="alert" でスクリーンリーダーが自動読み上げするようにします。

まとめ

フォームはWebサイトで最もアクセシビリティの問題が起きやすい部分の一つです。ラベルの正しい紐付け・必須の明示・わかりやすいエラーメッセージ、この3点を整えるだけで、視覚障がい者・高齢者・慣れないユーザーにとって格段に使いやすくなります。神戸・兵庫の企業サイトのお問い合わせページを見直す際は、ぜひこの3つのポイントをチェックしてみてください。

アクセシブルなフォームの作り方｜全ユーザーが使えるお問い合わせページ

ラベルとinputの正しい関係

必須・任意の明示方法

エラーメッセージの設計

まとめ