非入力/非インタラクティブ要素に<label>を使用することをお勧めしますか？

Question

<label>の代わりに<span>を使用する方が、プレビュー<img>などの対話性のない非入力要素にラベルを付ける場合は、それを使用する方がよいでしょうか？

例えば：

<span>Image preview:</span> 
<img id="preview"> 

又はこれ：

<label for="preview">Image preview:</label> 
<img id="preview"> 

Answer 1

<label>タグは<input>要素のラベルを定義します。

代わりに<span>を使用してください。

for属性は、HTML 4.01仕様のlabelの説明で定義されているように、ラベルをコントロール要素に関連付けます。これは、とりわけ、ラベル要素が（例えばクリックされることによって）フォーカスを受け取るときに、フォーカスを関連するコントロールに渡すことを意味する。ラベルとコントロールとの関連付けは、コントロールを扱う際に、関連するラベルが何であるかを尋ねる方法をユーザーに与えるスピーチベースのユーザーエージェントによっても使用される場合があります。

HTML仕様では、ラベルをコントロールに関連付ける必要はありませんが、Webコンテンツアクセシビリティガイドライン（WCAG）2.0では行いません。これは技術文書H44に記載されています。ラベル要素を使用してテキストラベルをフォームコントロールに関連付けると、forおよびid属性による明示的な関連付けと同じように暗黙的な関連付け（例えば、ラベル内の入力の入れ子による）が広くサポートされていないことが説明されます。