图片的替代文字

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

Alice Boxhall
Alice Boxhall
X
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

研究表明，9 只猫中有 10 只会在主人睡觉时静静地评判主人

猫

在该页面中，我们展示了一张猫的图片，用来说明一篇关于猫咪众所周知的评判行为的文章。屏幕阅读器会使用其字面名称 "/160204193356-01-cat-500.jpg" 读出此图片。这虽然准确，但毫无用处。

您可以使用 alt 属性为此图片提供实用的文本替代项，例如“一只猫凶狠地盯着远方”。

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

然后，屏幕阅读器可以朗读图片的简要说明（显示在 VoiceOver 的黑色栏中），用户可以选择是否继续阅读文章。

替代文本经过改进的图片

关于 alt 的几点说明：

  • 借助 alt，您可以指定一个简单的字符串，以便在图片不可用时使用，例如图片无法加载、被网络抓取漫游器访问或被屏幕阅读器遇到时。
  • alt 与 title 或任何类型的字幕不同，它仅在没有图片可用时才会使用。

撰写实用的替代文本是一门艺术。为了使字符串成为可用的文字替代项，它需要在相同的上下文中传达与图片相同的概念。

假设您要在页面的标头中添加链接的徽标图片，如上图所示。我们可以非常准确地将该图片描述为“Funion 徽标”。

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

您可能很想为其提供更简单的文本替代项，例如“首页”或“主页”，但这对弱视用户和视力正常的用户来说都不利。

但假设屏幕阅读器用户想要在网页上找到标头徽标，如果为其设置“首页”alt 值，实际上会给用户带来更混乱的体验。与屏幕阅读器用户一样，视力正常的用户也面临着同样的挑战：了解点击网站徽标会有什么效果。

另一方面，描述图片并不总是有用。例如，假设有一个带有“搜索”文本的搜索按钮，其中包含一个放大镜图片。如果没有文字，您肯定会为该图片设置“搜索”的 alt 值。但是，由于我们有可见的文本，屏幕阅读器会提取并大声朗读“搜索”一词；因此，图片上相同的 alt 值是多余的。

不过，我们知道，如果我们不提供 alt 文本，系统可能会改为读出图片文件名，这既没有用处，也可能会造成混淆。在这种情况下，您只需使用一个空的 alt 属性，屏幕阅读器就会完全跳过该图片。

<img src="magnifying-glass.jpg&qu>ot; alt=""

总而言之，所有图片都应具有 alt 属性，但不一定都包含文本。重要图片应具有描述性替代文本，简要说明图片的内容，而装饰性图片应具有空 alt 属性，即 alt=""。