【labelタグ】フォーム内でフォーム部品に説明テキストを付けよう！「HTML・解説」- ノブレコ

★<label>タグの特徴

<label>の説明

<label>とは

フォームコントロールである部品に、ラベルを付けることができるタグです。

フォームには、<input>、<textarea>などの要素を使って入力欄などを作ることができますが、そのユーザーインターフェイスが何であるかの「説明テキスト（キャプション）」を示すことができるようになるタグです。

この要素を使うと、フォームコントロールとラベルを明確に関連付けることができ、プログラムにラベルの解釈を可能にします。つまりブラウザに対しても、そのテキストがラベルであることが伝わるようになります。

■使用目的

HTMLにおいて、フォームコントロールで作成した入力欄に対して、キャプション（説明テキスト）を付けるために使用します。

キャプションには、その欄が何を入力するための欄なのかをテキストや画像を入れて表示させます。読み上げソフトを使用しているユーザーは、そのラベルのキャプションを音声などで聞き取り入力欄の内容を把握したりできるので、アクセシビリティの向上に役に立ちます。

■使える属性

使用上の注意点

①ボタンやリンクは含まないようにする。

<label>要素の中に、<button>要素や<a>要素は入れないでください。これらの要素を入れてしまうと、入力欄であるはずの機能が正常に機能しないことがあります。

②見出しタグは含まないようにする。

見出しタグを入れてしまうと、ラベルであることをプログラムに認識させる目的が、見出しのセクションとして認識させてしまうことになります。アクセシビリティの観点などからも、混在させて使用するのは避けましょう。

③<label>要素の中に<label>要素を入れることはできない。

内容モデルはフレージングですが、<label>要素を入れ子にすることはできません。

内容モデル

<label>要素の内容モデルは「phrasing」です。

<label>要素を子孫に含むことはできません、また、ラベル付け可能要素を子孫に含む場合は、この<label>要素と関連付けさせる必要があります。

別の<label>要素と関連付けされた、ラベル付け可能要素を子孫に含むことはできません。

１つの<label>要素を複数のラベル付け可能要素に関連付けさせることもできません。この場合はエラーが発生し、複数の内の最初のラベル付け可能要素だけが実行結果に反映されます。

内容モデルが「flow」ではないため、<h>、<div>、<p>などの要素は入れることができません。また内容にラベル付け可能要素が含まれている場合は、<label>要素はその要素に結び付けられます。

★ラベル付け可能要素の一覧

アクセシビリティでの注意点

<label>要素は標準でのARIAロールを持っていません。

<label>要素とラベル付け可能要素を結び付けると、ラベル付け可能要素のラベルとして扱われます。

スクリーンリーダーなどでフォームを操作する場合、ラベルが適切なものでないと、ユーザーが何の入力欄なのか理解しずらくなりますので、簡潔に分かりやいラベル（説明テキスト）を付けましょう。

また、ラベルを付けていると、そのラベルをクリックした場合でもフォームコントロール（部品の入力欄）にフォーカスが移るので、マウス操作が難しいユーザーにも役に立ちます。

<label>の記述例

■基本的な使用例

★HTML

★実行結果

ニックネーム

まとめ

この記事では<label>タグの解説をいたしました。

この要素は、ユーザーインターフェイスにキャプションを示すための要素で、フォームコントロールにラベルを付けるためのタグです。

<label>要素でラベルを付けることで、ユーザーだけでなく、プログラムであるブラウザにも認識させることができ、ユーザービリティとアクセシビリティの向上に役に立ちます。

必ず必要な要素ではないものの、webサイトを構成する上でアクセシビリティの改善は重要な課題になりますので、フォームを使用する機会があれば、合わせて使っていきたい要素です。

この記事が少しでも皆さんのお役に立てれば幸いです。

最後まで読んでいただき、ありがとうございました。またなん☆*: .｡. o(≧▽≦)o .｡.:*☆