label要素

解説

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

labelで紐づけると押しやすさと読み上げが変わる

画面上は項目名を並べるだけでも同じに見えますが、実際には次の違いが出ます。

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

アクセシビリティの基本です。障害者差別解消法の改正により、2024年4月1日から民間事業者にも合理的配慮の提供が義務づけられており、問い合わせフォームのように顧客が必ず使う画面では、優先度の高い対応になります。

出典

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