問い合わせフォームの入力欄に付ける「ラベル」の基本
この記事と画像はAIが作成しました。
問い合わせフォームは、会社と訪問者をつなぐ入口です。入力欄が何を求めているのかを、訪問者に伝える必要があります。入力欄の内容を示す文字を ラベル といいます。W3C（ウェブの標準を定める国際団体）のWAI（ウェブアクセシビリティの取り組み）は、テキスト欄、チェックボックス、ラジオボタン（複数の選択肢から1つを選ぶ部品）、ドロップダウンメニューなど、すべての入力部品にラベルを付けるよう示しています。ラベルは、その入力部品が何のためのものかを説明する必要があります。
ラベルと入力欄を結び付ける
ラベルは、見た目の近くに文字を置くだけでは足りません。ラベルと入力欄を、HTMLの上で結び付けます。結び付けると、ブラウザーはラベルの文字をクリックしても入力欄を選べるようにし、画面の文字を音声で読み上げるソフト（スクリーンリーダー）は、入力欄に移動したときにラベルを読み上げます。
W3Cが勧める方法は、label 要素の for 属性に、入力欄の id 属性と完全に同じ値を書くことです。これを明示的な関連付けといいます。もう1つの方法は、label 要素の中に入力欄とラベルの文字を一緒に入れることです。ただしW3Cは、明示的なラベルのほうが支援技術（障害のある人の利用を助けるソフトや機器）によく対応されていると述べています。
プレースホルダーはラベルの代わりにしない
プレースホルダーとは、空の入力欄の中に薄く表示される入力例や書式の案内のことです。W3Cは、入力例や書式のヒントにはプレースホルダーを使えるが、ラベルの代わりにしてはいけないと説明しています。スクリーンリーダーがプレースホルダーをラベルとして扱うとは限らず、対応も一定ではないためです。また、プレースホルダーは文字の色が薄くなりやすく、入力を始めると消えます。入力欄ごとの単純な案内（日付の書式など）は、プレースホルダーに頼らず、ラベルの文字の中に入れる方法が、ブラウザーや支援技術をまたいで最も信頼できるとされています。フォーム全体に共通する案内は、フォームの手前に置きます。そうすると、スクリーンリーダーが入力欄の読み上げに切り替わる前に、案内が読み上げられます。
確認すること
- すべての入力欄に、見えるラベルがあるか
- ラベルの
forと入力欄のidが、同じ値になっているか - 必須の項目や、求める書式を、ラベルの文字に書いているか
- 入力欄ごとの案内を、プレースホルダーだけに書いていないか
- フォーム全体の案内を、フォームの手前に置いているか
W3Cは、ほとんどの利用者が、見えるラベルを好むか、または必要としていると述べています。ラベルは、フォームを分かりやすくするための基本の1つです。
出典
ウェブサイトの基本を整える「ウェブ基礎固め」については、株式会社グレイディエントへお問い合わせください。