HTMLのlabel要素とフォーム設計の基本

2025.12.25

HTML

― アクセシビリティと使いやすさを両立するために ―

Webサイトにおいてフォームは、問い合わせ・申込み・検索など、ユーザーとサイトをつなぐ重要な接点です。
その中でも label要素 は、見た目以上に重要な役割を担っています。

この記事では、HTMLのlabel要素の正しい使い方を中心に、アクセシビリティとユーザビリティを意識したフォーム設計の基本を、初学者でも理解できるように整理して解説します。

Contents

1 フォームにおけるlabel要素の役割
- 1.1 label要素とは何か
2 labelとinputを正しく関連付ける方法
- 2.1 for属性を使った基本形
- 2.2 labelでinputを囲む書き方
3 labelを省略してはいけない理由
- 3.1 プレースホルダーだけでは不十分
4 アクセシビリティを意識したlabel設計
- 4.1 視覚的に非表示でもlabelは残す
5 フォーム全体で考える設計の基本
6 label設計とセマンティックHTMLの関係
7 まとめ
8 関連記事

フォームにおけるlabel要素の役割

label要素とは何か

label要素は、入力欄（input・select・textareaなど）に対する説明文を示すためのHTML要素です。
単なるテキストではなく、「この説明文は、この入力欄のものです」と機械的にも伝える役割を持っています。

これにより、以下のような効果が得られます。

入力欄と説明文の関係が明確になる
スクリーンリーダーで正しく読み上げられる
ラベルをクリックすると入力欄にフォーカスできる

labelとinputを正しく関連付ける方法

for属性を使った基本形

最も基本的で推奨される方法は、labelのfor属性と、inputのid属性を一致させる書き方です。

<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">

このように記述すると、

視覚的にも意味的にも対応関係が明確になる
支援技術でも正しく認識される

というメリットがあります。

labelでinputを囲む書き方

もう一つの方法として、label要素の中にinputを含める書き方もあります。

<label>
  メールアドレス
  <input type="email" name="email">
</label>

この方法でも関連付けは成立しますが、
CSS設計やJavaScript制御の観点では、for属性を使った方法の方が扱いやすいケースが多いです。

labelを省略してはいけない理由

プレースホルダーだけでは不十分

placeholder属性を使って説明文を表示するケースがありますが、
placeholderはlabelの代替にはなりません。

理由は以下の通りです。

入力すると文字が消えてしまう
スクリーンリーダーで正しく伝わらないことがある
入力内容の確認がしづらくなる

そのため、labelは必ず明示的に用意することが基本です。

アクセシビリティを意識したlabel設計

視覚的に非表示でもlabelは残す

デザイン上、labelを表示したくない場合でも、HTMLから削除するのは避けるべきです。
その場合は、CSSで視覚的に隠す方法を使います。

CSS

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

HTML

<label for="search" class="visually-hidden">検索</label>
<input type="search" id="search">

このようにすると、

見た目には表示されない
支援技術には正しく伝わる

という状態を実現できます。

フォーム全体で考える設計の基本

入力項目は論理的な順序で並べる

フォームでは、入力の流れが自然であることが重要です。

個人情報 → 連絡先 → 詳細内容
必須項目を先に、補足項目を後に

といったように、考えなくても進める構成を意識します。

必須・任意は明確に示す

必須項目がある場合は、視覚的にも意味的にも分かるようにします。

「必須」「任意」のテキストをlabel内に含める
色だけに依存しない表現にする

<label for="name">氏名（必須）</label>
<input type="text" id="name" required>

エラーメッセージとの関係も考慮する

入力エラーが発生した場合、
どの項目でエラーが起きているのかがすぐ分かる必要があります。

labelと入力欄の近くに表示する
エラー内容は具体的に書く

labelが正しく設定されていれば、エラーの伝達もより正確になります。

label設計とセマンティックHTMLの関係

label要素は、セマンティックHTMLの考え方と密接に関係しています。
「見た目」ではなく「意味」で要素を選ぶことが、結果として使いやすさにつながります。

セマンティックなマークアップ全体については、以下の記事も参考になります。

まとめ

label要素はフォーム設計の基礎であり、省略すべきではない
for属性とid属性で正しく関連付ける
placeholderはlabelの代替にならない
アクセシビリティと使いやすさの両立が重要

labelを正しく使うことは、小さな実装でありながら、
多くのユーザーにとって大きな価値を生み出します。

フォームは「動けばよい」ものではありません。
正しいHTML設計を積み重ねることで、品質の高いWebサイトにつながっていきます。