【HTML Living Standard】label要素の使い方
label要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
labelオブジェクトは、HTMLフォーム内の入力コントロール（例えば、テキスト入力欄、チェックボックス、ラジオボタンなど）に対して、その説明文であるラベルを関連付けるためのオブジェクトです。この関連付けは、ウェブページのユーザビリティ（使いやすさ）と特にアクセシビリティ（利用しやすさ）の向上において、非常に重要な役割を果たします。
具体的には、ユーザーがラベルのテキスト部分をクリックした際に、関連付けられたフォームコントロールに自動的にフォーカスが移動したり、チェックボックスやラジオボタンが選択されたりするようになります。これにより、小さな入力コントロールを直接クリックするよりも、より広い範囲を操作可能になり、ユーザーの操作性が向上します。
さらに、スクリーンリーダーなどの支援技術を利用するユーザーにとって、labelオブジェクトは不可欠な存在です。labelオブジェクトによって、どの説明文がどの入力フィールドに対応しているかを明確に伝えることができるため、視覚に障害のあるユーザーもフォームの内容を正確に理解し、迷うことなく操作することが可能になります。
labelオブジェクトとフォームコントロールの関連付け方には二種類あります。一つは、<label>要素のfor属性に、関連付けるフォームコントロールのid属性値を指定する方法です。もう一つは、フォームコントロール自体を<label>要素の内側に直接記述する方法で、この場合はfor属性は不要となり、暗黙的に関連付けられます。このように、labelオブジェクトは、ウェブアプリケーションのユーザー体験を向上させるために不可欠な要素です。
構文(syntax)
1<label for="element_id">ラベルテキスト</label>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません