Является ли хорошей практикой использование <label> для не входящих/неинтерактивных элементов?

При маркировке не входящего элемента без интерактивности, такого как предварительный просмотр <img>, лучше (или правильно) использовать <span> вместо <label>?

например:.

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

или это:

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

Ответ 1

Тег <label> определяет метку для элемента <input>.

Поэтому используйте вместо него <span>.

Атрибут for связывает метку с элементом управления, как определено в описании метки в спецификации HTML 4.01. Это подразумевает, среди прочего, что, когда элемент метки получает фокус (например, по нажатию), он передает фокус на связанный с ним элемент управления. Ассоциация между меткой и элементом управления также может использоваться речевыми пользовательскими агентами, которые могут дать пользователю возможность спросить, что такое ассоциированная метка при работе с элементом управления. (Ассоциация может быть не такой очевидной, как при визуальной визуализации.

Спецификации HTML не обязывают связывать метки с элементами управления, как это делают Рекомендации по доступности веб-контента (WCAG) 2.0. Это описано в техническом документе H44: использование элементов меток для связи текстовых меток с элементами управления формы, что также объясняет, что неявная ассоциация (путем вложения, например, ввода внутри метки) не так широко поддерживается, как явная ассоциация через атрибуты for и id,