图片的替代文字

使用 alt 属性为图片提供替代文本

Alice Boxhall
Alice Boxhall
Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

图片是大多数网页的重要组成部分,当然也是对弱视用户造成阻碍的特殊因素。我们必须考虑图片在网页中发挥的作用,才能确定它应该具有哪种替代文本类型。看看这张图片。

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

研究显示,10 只猫中有 9 在睡觉时会安静地评判主人

Cat

在该页面上,我们有一张猫的图片,插图中有一篇关于猫著名的评判行为的文章。屏幕阅读器将使用这张图片的文字名称 "/160204193356-01-cat-500.jpg" 读出该图片的内容。这种做法准确,但毫无用处。

您可以使用 alt 属性为此图片提供实用的替代文本,例如“一只目瞪口呆地盯着太空的猫”。

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

然后,屏幕阅读器可以读出图片的简洁说明(显示在黑色旁白栏中),并且用户可以选择是否继续阅读文章。

改进替代文本的图片

有关 alt 的几条注释:

  • alt 允许您指定一个简单字符串,以便在图片不可用时使用,例如当图片加载失败、被网页抓取机器人访问或被屏幕阅读器遇到时。
  • alttitle 或任何类型的图片说明不同,因为它仅在图片不可用时使用。

撰写有用的替代文本有点像一门艺术。字符串必须在同一上下文中传达与图片相同的概念,才能成为实用的替代文本。

以如上图所示的网页标头中链接的徽标图片为例。 我们可以将这张图片非常准确地描述成“The Funion 徽标”。

<img class="logo" src="logo.jpg" alt="The Funion logo">

您可能很想给它提供一个“首页”或“主页”这样更简单的替代文本,但这样做对弱视用户和视力正常的用户都没有帮助。

但是,想象一下,如果屏幕阅读器用户想要找到网页上的标头广告徽标,那么将 Alt 值设为“home”实际上会带来更令人困惑的体验。视力正常的用户也面临着同样的挑战 - 弄清楚点击网站徽标有什么作用 - 作为屏幕阅读器用户。

另一方面,描述图片并不总是有用。例如,假设搜索按钮中有一幅包含文本“搜索”的放大镜图片。如果其中没有文字,您肯定会将这张图片的 alt 值设为“search”。但是,由于我们有可见文本,因此屏幕阅读器会拾取并朗读“搜索”一词;因此,图片上完全相同的 alt 值是多余的。

不过,我们知道,如果省略 alt 文本,我们听到的很可能是图片文件名,这样不仅毫无用处,而且还容易引起混淆。在这种情况下,您只需使用空的 alt 属性,屏幕阅读器便会完全跳过该图片。

<img src="magnifying-glass.jpg" alt="">

总而言之,所有图片都应具有 alt 属性,但它们不必都包含文本。重要图片应具有描述性的替代文本,从而简洁地描述图片的内容;而装饰性图片应具有空的 alt 属性(即 alt="")。