使用< label>是一种好习惯吗?用于非输入/非交互元素? [英] Is it good practice to use <label> for non-input/non-interactive elements?

问题描述

当标记没有交互性的非输入元素(例如预览<img>)时，使用<span>代替<label>更好(或更正确)吗?

When labeling a non-input element with no interactivity, such as a preview <img>, is it better (or correct) to use <span> instead of <label>?

例如:

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

或者这个:

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

推荐答案

<label>标签为<input>元素定义标签.

The <label> tag defines a label for an <input> element.

因此，请使用<span>.

for属性将标签与控制元素相关联，如HTML 4.01规范中的标签说明中所定义.这尤其意味着，当label元素获得焦点(例如，通过单击)时，它会将焦点传递给与其关联的控件.标签和控件之间的关联也可以由基于语音的用户代理使用，当处理控件时，基于语音的用户代理可以为用户提供一种询问相关标签是什么的方式. (这种关联可能不像视觉渲染那样明显.

The for attribute associates the label with a control element, as defined in the description of label in the HTML 4.01 spec. This implies, among other things, that when the label element receives focus (e.g. by being clicked on), it passes the focus on to its associated control. The association between a label and a control may also be used by speech-based user agents, which may give the user a way to ask what the associated label is, when dealing with a control. (The association may not be as obvious as in visual rendering.

HTML规范没有强制性要求将标签与控件关联，但是Web内容可访问性指南(WCAG)2.0确实如此.技术文档 H44:使用标签元素将文本标签与表单控件相关联，对此进行了说明，这也解释了隐式关联(通过嵌套例如在标签内部的输入)不如通过for和id属性的显式关联得到广泛支持，

HTML specifications do not make it mandatory to associate labels with controls, but Web Content Accessibility Guidelines (WCAG) 2.0 do. This is described in the technical document H44: Using label elements to associate text labels with form controls, which also explains that the implicit association (by nesting e.g. input inside label) is not as widely supported as the explicit association via for and id attributes,

这篇关于使用< label>是一种好习惯吗?用于非输入/非交互元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！