概要
- 内容モデル
-
- Phrasing content。ただし、「当該
label要素によってラベル付けされているのではないLabelable element」及び「label要素」を子孫に含んではならない。 - 子孫に正しくLabelable elementが含まれている場合は、それがラベル付け対象となる。
- 内容テキストが、ラベルテキストとなる。
- Phrasing content。ただし、「当該
- 属性
-
- グローバル属性
for→同一HTML文書内にあるLabelable elementのid属性値。ラベル付け対象を指定する。
- HTML構文におけるタグの省略
-
- 省略不可。
- WAI-ARIA
-
roleは指定不可。aria-label属性等による名前付けをしてはならない。
- 意味・用法
-
Labelable elementに対するラベルを表す。
ラベル付け対象との関連付けの方法は、
for属性によるか、子孫にラベル付け対象要素を内包するかのいずれか（対象が同一である限り、両方の方法を重複させることも可）。複数のLabelable elementを子孫に含んでしまった場合は、そのうちの最初のLabelable elementのみがラベル付け対象となる。
「チェックボックスにラベルをつけた場合に、当該ラベルをクリックしたら、当該チェックボックスがチェック状態になる」かどうかなどのルールは、プラットフォーム（オペレーティングシステムとかブラウザとか）に依存する。
アクセシビリティ関連
- 一般的な視覚系ブラウザ等では、
label要素によるフォームコントロールのラベル付けは、当該フォームコントロールのクリック可能領域を広げることになるので、アクセシビリティを向上させる（Techniques for WCAG 2.1 : H44）。 label要素の子孫にInteractive contentを含めることは、上記の効用を妨げることになるので、アクセシビリティを妨げる。
私見・補足
個人的には、ラベル付け対象がほぼフォーム関連の要素に限定されているのが不満だ。label要素を汎用的なラベル付け要素として使いたい。
内容モデルを噛み砕いていうと下記のような感じだろう。
- Phrasing contentを子として含むことができる。念のため付言すると、Labelable elementたる要素はすべて、Phrasing contentでもある。
label要素を子孫に含んではならない。for属性が指定されているlabel要素が、Labelable elementを子孫に含む場合は、当該Labelable elementは、当該for属性によってラベル付け対象とされているものでなければならない。なぜなら、そうでないLabelable elementは、「当該label要素によってラベル付けされているのではないLabelable element」として、当該label要素の子孫に含むことができない要素と評価され非準拠となるからである。- 上述のとおり、複数のLabelable elementを子孫に含んでしまった場合は、そのうちの最初のLabelable elementのみがラベル付け対象となり、当該
label要素に子孫として含むことができるものとなる。この場合、子孫たるLabelable elementのうち二番目以降のものは、「当該label要素によってラベル付けされているのではないLabelable element」として、当該label要素の子孫に含むことができない要素と評価され非準拠となる。つまり、label要素は、複数のLabelable elementを子孫に含んではならない。 - Labelable elementを子孫に全く含まなくてもよい。この場合は、
for属性で、ラベル付け対象を指定する。
表示確認
- ソース
-
<label><input type="checkbox" />←のラベル</label> - 表示結果