フォームを迷わず使えるようにするには、入力欄やボタンが「何のためのものか」を示すラベルと、「どのように入力するか」を補う説明が必要です。
見た目だけでなく、スクリーンリーダーなどの支援技術にも関係が伝わるように実装します。
ラベルと説明の違い、HTMLでの関連付け、プレースホルダーとARIAの使い分けを、具体例と確認項目に分けて整理します。
フォーム全体の入力支援やエラー表示も確認したい場合は、フォームの入力支援とエラー設計の基本も参考になります。
ラベルと説明の役割
ラベルは、入力欄やボタンの目的を短い言葉で示す名称です。
「氏名」「メールアドレス」「問い合わせ内容」のように、利用者が何を入力または操作するのかを判断できる表現にします。
説明は、入力形式や条件など、ラベルだけでは伝え切れない情報を補う文です。
電話番号欄の「ハイフンを入れずに入力してください」などが当てはまります。
| 要素 | 伝える内容 | 例 |
|---|---|---|
| ラベル | 何を入力または操作するか | メールアドレス |
| 説明 | どのように入力するか、どの条件を満たすか | 半角英数字で入力してください |
短いラベルにすべての条件を詰め込むと読みにくくなります。
目的はラベル、入力方法は説明というように役割を分けると、必要な情報を見つけやすくなります。
ラベルがないフォームで起こる問題
見た目が似た入力欄が並んでいると、ラベルのない欄は何を入力する場所なのか判断しにくくなります。
視覚的な位置関係を利用しにくい場合は、入力欄と周囲の文字が適切に関連付けられていないことも操作の妨げになります。
- 入力内容を判断しにくい：氏名、住所、連絡先など、求められている情報を区別できません。
- 入力ミスを招きやすい：形式や条件が示されていないため、送信後に修正が必要になることがあります。
- 操作の目的が伝わりにくい：「送信」や「キャンセル」などのボタンが、何に対する操作なのか判断できない場合があります。
ラベルと説明は、特定の利用者だけに向けた情報ではありません。
初めてフォームを使う人、入力に不慣れな人、小さな画面で操作する人にとっても、迷いを減らす手掛かりになります。
フォーム実装の基本
WCAG（Web Content Accessibility Guidelines）では、利用者に入力を求める箇所へラベルまたは説明を提供する考え方が示されています。
文字を画面に置くだけでなく、どの文字がどの入力欄に対応するのかをHTMLで表すことも必要です。
label要素と入力欄を関連付ける
一般的な入力欄では、<label>要素のfor属性と、入力欄のid属性を同じ値にします。
これにより、「お名前」という文字と入力欄の対応関係が明確になります。
<label for="name">お名前</label>
<input type="text" id="name" name="name">forとidの値が違うと、見た目では近くに配置されていても、HTML上の関連付けは成立しません。
入力欄ごとに重複しないidを付け、対応を確認します。
ラベルは目的を具体的に書く
ラベルは短く保ちつつ、対象を区別できる表現にします。
複数の連絡先を入力するフォームなら、すべてを「連絡先」とするより、「メールアドレス」「電話番号」と分けたほうが目的を判断しやすくなります。
ボタンも同じ考え方で整えます。
「送信」だけで対象がわかりにくい場合は、「問い合わせを送信」のように、操作の対象を含めます。
入力規則は説明として分ける
特定の形式を求める入力欄には、ラベルとは別に短い説明を添えます。
説明文にidを付け、入力欄のaria-describedby属性から参照すると、両者の関係をHTMLで示せます。
<label for="phone">電話番号</label>
<p id="phone-help">ハイフンを入れずに入力してください。</p>
<input type="tel" id="phone" name="phone"
aria-describedby="phone-help">長い注意書きをラベルに含める必要はありません。
利用者が入力前に知る必要のある条件だけを、該当する入力欄の近くに置きます。
プレースホルダーだけに頼らない
プレースホルダーは、入力例や短いヒントを欄内に表示するために使えます。
ただし、項目名を示す通常のラベルの代わりにはせず、常に確認できるラベルを別に用意します。
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email"
placeholder="name@example.com">この例では、「メールアドレス」が項目の目的を示し、「name@example.com」が入力例を示します。
二つの役割を分けることで、入力中も項目の意味を確認できます。
ARIAはHTMLを補うために使う
aria-labelやaria-describedbyは、支援技術へ名前や説明を伝えるための属性です。
動的なインターフェースなど、通常のHTMLだけでは関係を十分に表しにくい場合に役立ちます。
通常の入力欄では、まず画面に見える<label>要素を用意します。
aria-labelだけを付けても画面上のラベルにはならないため、見えるラベルが必要な場面での代用にはしません。
ARIAの属性や役割を詳しく確認する場合は、WAI-ARIAの役割と使い方も参照してください。
よくある設計ミスと直し方
| 設計ミス | 直し方 |
|---|---|
| プレースホルダーだけで項目名を示す | 入力欄の外に見えるラベルを置き、プレースホルダーは入力例に限定する |
| ラベルと入力欄を見た目だけで並べる | labelのforと入力欄のidを一致させる |
| 入力形式を送信後に初めて知らせる | 必要な形式や条件を入力欄の近くに事前に示す |
| 説明を置いたが入力欄と結び付けていない | 必要に応じてaria-describedbyで説明文を参照する |
| どのボタンも「送信」とだけ書く | 文脈だけでは対象がわからない場合、操作の対象をラベルに含める |
公開前に確認する項目
- 入力欄とボタンのそれぞれに、目的がわかるラベルがあるか。
labelのforと入力欄のidが一致しているか。- 同じ画面のラベルを見比べたとき、項目や操作を区別できるか。
- 入力形式や条件を、入力を始める前に確認できるか。
- プレースホルダーだけをラベルとして使っていないか。
- 補足説明が必要な場合、対応する入力欄との関係をHTMLで示しているか。
確認では、画面を眺めるだけでなく、実際に各項目へ入力して送信まで進みます。
ラベル、説明、入力欄の対応を一つずつ追うと、見た目だけの確認では気付きにくい不足を見つけやすくなります。
ラベルと説明を整える手順
- 入力欄やボタンの目的を、見えるラベルで示します。
labelのforと入力欄のidを一致させます。- 入力形式や条件がある場合は、短い説明を入力欄の近くに置きます。
- 必要に応じて、説明と入力欄を
aria-describedbyで関連付けます。 - プレースホルダーは入力例として使い、ラベルの代わりにしません。
この順序で整えると、ラベルが示す目的と、説明が示す入力方法を混同せずに実装できます。
利用者が迷う箇所を減らし、支援技術にもフォームの構造を伝えられる設計につながります。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上に関心がある方は、サービスの詳細をご覧ください。