关于图像的 alt 属性，最佳实践是什么？
例如，假设我有一张带有标题的图像，上面写着“我们照顾我们的员工”，而随附的图像是一张男人从面包车窗户向外看向相机的照片，对于 alt 内容，我应该有类似的内容：
“我们照顾我们的员工”（图片说明的副本）
或者
“一个男人从面包车窗户望向相机的照片”（图像描述）
问问题
110 次
4 回答
4
编写 alt 标签没有“错误”或“正确”的方式，因为它与上下文相关。例如，采取以下场景；在您的网站上，最终用户被要求选择他最喜欢的颜色：
alt 标签如下：
<ul>
<li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
<li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
<li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
</ul>
第二种情况是，如果您有一个徽标，该徽标又链接到该网站，则 alt 标签应该是该链接的描述：
一个写得很好的 alt 标签应该是：
<a href="http://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>
以下示例更适用于您的场景。
这是与页面内容主题密切相关但未直接讨论的图像示例。受一首诗启发的一幅画的图像，在背诵那首诗的页面上。以下代码段显示了一个示例。这幅画是一幅名为《葱娘》的画作，灵感来自于这首诗，其题材也来源于这首诗。因此，强烈建议提供替代文本。在 alt 属性中有图片内容的简短描述，图片下方有一个链接，指向位于文档底部的较长描述。在较长描述的末尾，还有一个链接，指向有关这幅画的更多信息。
替代文本应该有以下代码
<header><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></header>
<img src="shalott.jpeg" alt="Painting of a young woman with long hair, sitting in a wooden boat. ">
<p><a href="#des">Description of the painting</a>.</p>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->
...
...
...
<p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.
<a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>
然而....有时一个alt标签可以一起省略。例如，如果您有上面的图像，其上下文描述相对于页面正下方的图像：
每周五在泰晤士河畔金斯敦河畔的 Boaters 酒吧参加我们的中世纪主题之夜。
对于上面的示例，以下任一解决方案都符合要求：
<p><img src="shalott.jpeg" alt=""></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p>
或者
<p><img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar,
on the riverside, Kingston upon Thames.</p>
于 2012-07-05T08:53:32.453 回答
3
来自 w3.org 的摘录
当图像包含对理解内容很重要的词时，替代文本应包含这些词。这将允许替代文本在页面上发挥与图像相同的功能。请注意，它不一定描述图像本身的视觉特征，但必须传达与图像相同的含义。
示例 1
网站上的图片提供了免费通讯的链接。图像包含文本“免费时事通讯。获取免费食谱、新闻等。了解更多。” 替代文本与图像中的文本匹配。
示例 2
网站上的图像描绘了建筑物的平面图。该图像是一个图像地图，每个房间都有一个交互式地图区域。替代文字是“建筑物的平面图。选择房间以获取有关房间用途或内容的更多信息。” “选择房间”的指令表明图像是交互式的。
于 2012-07-05T08:53:00.247 回答
0
请记住，这alt是为想象的文本替换。
很多情况下，我离开了，alt = ""因为没有文字可以取代那个想象。
其他时候，最好只使用一个字符：
<img src="fancy_bullet_point.gif" alt="*">
只要记住基本的经验法则：如果你没有图像，你会放什么？
于 2012-08-31T15:31:30.820 回答
0
警告：这个答案相当主观。
我特别在具有特殊功能的图像上使用此属性。例如，用户可以单击以保存某些内容的磁盘图像。然后 alt 的值将是“保存”。
但我认为您不应该对每张图片进行描述。只需说“画廊图片”或类似的东西。
于 2012-07-05T08:45:08.610 回答