label要素

解説

label要素は、フォームの入力欄と、その欄の項目名を結び付けるためのHTML要素です。問い合わせフォームを作る担当者は、すべての入力欄に対してlabel要素を設定します。項目名をプレースホルダーで代用すると入力を始めた時点で項目名が消えてしまうため、label要素は入力欄とは別に置きます。

仕組み

label要素と入力欄の関連付けには、2つの方法があります。1つ目は、label要素のfor属性に入力欄のidを指定する方法です。2つ目は、label要素の中に入力欄を入れ子にする方法です。

関連付けを行うと、画面上の見た目は同じでも、次の違いが生まれます。

• 項目名をクリック・タップしても入力欄が選択される（特にラジオボタンやチェックボックスで押しやすくなる）
• スクリーンリーダーが、どの欄に何を入力するのかを読み上げられる

実務での使われ方

label要素の設定は、フォームのアクセシビリティを確保するための基本的な対応です。障害者差別解消法の改正により、2024年4月1日から民間事業者にも、障害のある人から申し出があった場合の合理的配慮の提供が義務づけられました。一方で、ウェブサイトのアクセシビリティの確保は、同法の「環境の整備」として事業者の努力義務に位置づけられています。したがって、問い合わせフォームのように顧客が必ず使う画面では、label要素の設定を優先度の高い対応として扱います。

出典

• 障害者差別解消法について（内閣府）
• label: ラベル要素（MDN）