写好“alt”内容？

Question

关于图像的alt属性，最佳做法是什么？

例如，假设我有一个带有标题的图像，上面写着“我们照看我们的工作人员”，附图是一张从车窗朝向相机看的男人的照片，因为我应该有alt内容类似的东西：

“我们照顾我们的员工”（图片说明的副本）

OR

“一名男子从车窗外望向镜头的照片”（图片说明）

Answer 1

Taken from the w3 spec, reworded;

没有“错误”或“正确”的方式来编写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 Bar参加我们的中世纪主题之夜   河畔，泰晤士河畔金斯敦。

对于上面的示例，以下任一解决方案都符合：

<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>

Answer 2

从w3.org中提取

  

当图像包含对理解图像很重要的单词时   内容，alt文本应包括这些单词。这将允许   alt文本在页面上播放与图像相同的功能。注意   它不一定描述的视觉特征   图像本身，但必须传达与图像相同的含义。

示例1

  

网站上的图片提供免费时事通讯的链接。图片   包含文本“免费通讯。获取免费食谱，新闻等。   了解详情。“替代文字与图片中的文字相匹配。

示例2

  

网站上的图像描绘了建筑物的平面图。图片   是一个图像地图，每个房间都是一个交互式地图区域。替代文字   是“建筑物的平面图。选择一个房间以获取更多信息   关于房间的目的或内容。“指示”选择   房间“表示图像是互动的。

http://www.w3.org/TR/WCAG20-TECHS/H37

Answer 3

警告：这个答案相当主观。

我特别在具有特殊功能的图像上使用此属性。例如，用户可以单击以保存某些内容的磁盘映像。那么alt的值就是“保存”。

但我不认为你应该对每张照片进行描述。只需说“画廊形象”或类似的东西。

Answer 4

请记住，alt用于替换想象的文本。

很多情况下，我离开了alt = ""，因为没有文字可以取代这种想象。

其他时候，最好只有一个角色：

<img src="fancy_bullet_point.gif" alt="*">

记住基本的经验法则：如果你没有图像，那么你会把它放在那里？