标记没有交互性的非输入元素(例如预览)时<img>,是否更好(或更正)使用<span>而不是<label>？
例如:
<span>Image preview:</span>
<img id="preview">
或这个:
<label for="preview">Image preview:</label>
<img id="preview">
Dar*_*ows 17
的<label>标记定义为一个标签<input>元件.
所以请<span>改用.
for属性将标签与控件元素相关联,如HTML 4.01规范中标签的描述中所定义.除其他事项外,这意味着当标签元素接收焦点(例如通过被点击)时,它将焦点转移到其关联的控件上.标签和控件之间的关联也可以由基于语音的用户代理使用,这可以在处理控件时向用户提供询问相关标签是什么的方式.(该关联可能不像在视觉渲染中那么明显.
HTML规范并不强制要求将标签与控件相关联,但Web内容可访问性指南(WCAG)2.0也是如此.这在技术文档H44中描述:使用标签元素将文本标签与表单控件相关联,这也解释了隐式关联(通过嵌套,例如在标签内输入)不像通过for和id属性的显式关联那样得到广泛支持,
zco*_*p98 12
<label>使用元素作为非输入标签的标题是完全可以接受的。
根据labelHTML Living Standard 的元素部分，label元素可以选择与表单控件关联，但这不是必需的。
\n\n该
\nlabel元素表示用户界面中的标题。标题可以与特定的表单控件（称为label元素的标记控件）相关联，可以使用for属性，也可以将表单控件放入元素label本身内。除非以下规则另有规定，否则
\nlabel元素没有标记的 control。
请特别注意，除了说明标题“可以与...表单控件关联”（而不是“必须”）之外，文档还明确指出：
\n\n\n除非以下规则另有规定，否则元素
\nlabel没有[与标题关联的特定表单控件]。
仅当该元素打算与或不与关联输入一起使用时，这似乎才有意义。鉴于label\ 的语义含义是有意义的，作为内容的标题 \xe2\x80\x93 不仅仅是输入可以拥有并受益于标题。
指示元素label只能在inputs 上使用的来源经常引用 WCAG 2+'s 输入有标签的要求，以及WCAG 技术 H44：使用标签元素将文本标签与表单控件关联，它提供了一个满足以下要求的示例模式：规格
这不是对labelelements使用的强制要求，这样解释是一种误读。
WCAG 本身在其“关于技术”页面上指出，这些技术是非规范的：
\n\n\n不需要技术
\n技术内容丰富\xe2\x80\x94，这意味着它们不是必需的。确定是否符合 WCAG 2.1 的基础是 WCAG 2.1 标准的成功标准\xe2\x80\x94，而不是技术。
\n
H44 技术的目标是满足或帮助满足与以下相关的 4 个 WCAG 2+ 成功标准：
\n最终，上述技术和标准旨在帮助可访问性\xe2\x80\x93，而不是规定label元素仅用于用户输入。
我知道这是旧的并且已被回答和接受 - 我的解决方案与其中一个评论（@Quentin）相同 - 但为了提高意识和教育代码使用语义正确的元素 -图形和相关的figcaption是此处描述的工作的最佳工具。
这是文档的链接，所有浏览器 ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure )都完全支持 Fugure 元素作为 html5 元素。
图形元素的所有部分都可以设置样式 - 并且 figcaption 可以是图形元素的第一个子元素或最后一个子元素（ - 将其放置在图像之前或之后）
figure {
text-align: center;
}
figcaption {
margin-bottom: 4px;
color: blue;
font-weight: bold
}
figure img {
border: solid 1px blue;
border-radius: 8px;
}<figure>
<figcaption>Image preview:</figcaption>
<img id="preview" src="https://i.pinimg.com/originals/3e/6b/cd/3e6bcdc46881f5355163f9783c44a985.jpg" alt="fluffy-kitten" height="100" />
</figure>| 归档时间： |
|
| 查看次数： |
6416 次 |
| 最近记录： |