如何正确使用ALT标签？

Question

我已将 ALT 标签用于所有格式为以下格式的图片：

<a alt="IMAGE ALT TEXT" href="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s1600/jquery-lightbox-with-dark-background.png" imageanchor="1"><img src="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s320/jquery-lightbox-with-dark-background.png" style="height:100%; width:100%;" /></a>

但是当图像检查工具检测到它们的 alt 标签为 "missing" 时，我感到很惊讶。我想我必须像这样在 "img src" 标签之后插入 "alt" 标签：

<a href="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s1600/jquery-lightbox-with-dark-background.png" imageanchor="1"><img src="http://2.bp.blogspot.com/-MEHRDQvoG-c/Ux0mL1mlJII/AAAAAAAAGg8/S9h3KjhJ6YQ/s320/jquery-lightbox-with-dark-background.png" alt="IMAGE ALT TEXT" style="height:100%; width:100%;" /></a>

请问这个样式是否正确？

Answer 1

alt 是属性 IMG 标签而不是 A 标签。它代表屏幕阅读器显示或阅读的替代文本。所以你提供的第二个例子是正确的。

Answer 2

alt 属性必须在元素上，而不是在超链接元素上。

Answer 3

alt 应该只在 <applet>, <area>, <img>, <input>

中使用

alt - <applet>, <area>, <img>, <input> - Alternative text in case an image can't be displayed.

Source

这里是 img 的片段：

<img src="http://lorempixel.com/100/100" alt="image">

Answer 4

您可能混淆了 "alt" 标签和 "title" 标签。

"alt" 标签用于图像：

<img src="someImage.jpg" alt="image">

标题标签可用于图片和 links

<img src="someImage.jpg alt="image" title="Some Image">
<a href="someLink.com" title="This is some link">

在传统的 link 上不需要任何 "alt" 标签，因为即使 link 不好，仍然会有文字包裹在锚点中指出它是什么：

<a href="someLink.com">Link to some link</a>

对于图像，"alt" 属性值仅在图像出于某种原因不可用时显示。

如何正确使用ALT标签？

How to use ALT tag correctly?

html

alt