谷歌解释了标志和按钮的替代文本

在 Google Search Off the Record 播客中，Google 的 Lizzi Sassman 和 John Mueller 讨论了处理徽标和基于图像的按钮的替代文本的最佳方法。

有向徽标和按钮添加 alt 属性的最佳实践。

这些规则起初看起来有点复杂，但实际上很容易理解。

获得正确的 alt 属性对用户有好处，从长远来看，这对收益很有好处。

向功能图像添加替代文本

Lizzi Sassman 通过引用功能性图像开始讨论，这些图像在网页上具有功能性目的。

她询问替代文本是否应该描述按钮的作用或在按钮是图标的情况下按钮上的图像是什么。

最后，她问是否有 SEO 目的将替代文本添加到按钮等功能图像中。

“莉齐·萨斯曼：
…我们在视觉资产上花费的关注程度，我们也应该在描述该资产的词语中投入同样的精力。 我认为这很棒。

另一类图像就像功能性的东西，有时可能是一个按钮。

就像它是一个图形，也可以作为某种东西。

那么替代文字是否应该告诉我即将发生的事情？

如果你点击这个，那么它会带你到这里吗？

它可以像某物的图像，然后也可以用作按钮。

你是否描述了这个功能，或者就像它一样，我不知道......就像一个箭头图片？

而且，这对SEO有影响吗？

约翰·穆勒：
是的。 我认为…

莉齐·萨斯曼：
它可能像一个标志。

约翰·穆勒：
对于可访问性，这可能是有道理的，只是围绕它做一些事情。

但对于 SEO，人们不会搜索结帐按钮或类似的东西。”

按钮上的替代文字是为了可访问性而不是 SEO

John Mueller 明确表示，将 alt 文本添加到按钮没有 SEO 目的。

但他也观察到，这些图像的替代文本主要是出于可访问性的原因。

莉齐继续讨论：

“莉齐·萨斯曼：
......但也许他们会为了标志，或者类似标志的东西。 当您单击它时，它会将您带到主页或其他地方。

但它也是，“哦，这是一个标志。”

所以你说，“这是谷歌搜索中心的标志。”

约翰·穆勒：
当然。

莉齐·萨斯曼：
或者像描述性文字一样。

它是徽标中的 Googlebot，但了解图像最重要的是它是徽标吗？

或者标志是什么样子的？

我想从这个角度来看，人们可能正在寻找徽标。

约翰·穆勒：
是的。

莉齐·萨斯曼：

比如 X 公司的标志是什么？

约翰·穆勒：
是的。 我的意思是它可以追溯到我们试图避免的那种策略。

你想被发现是为了什么？

莉齐·萨斯曼：
是的，但这是最重要的问题，我想，因为那样它就会引导……

我可以被所有这些兔子洞冲昏头脑，所以它有点，我不知道，优先考虑我们应该考虑的事情，因为你不一定需要为这些事情写所有的事情，我猜。”

在徽标和按钮上正确使用替代文本

在徽标等图像上使用替代文本的正确方法实际上取决于图像是链接还是不是链接。

如果徽标图像用作返回主页的链接，那么使用该图像所具有的功能标记该图像是正确的，这样使用屏幕阅读器的站点访问者就不会认为该徽标是指向主页的链接。

官方 HTML 标准制定机构万维网联盟 (W3C) 发布了有关如何处理徽标的说明。

标志主页链接

用作主页链接的徽标应包含替代文本，告诉屏幕阅读器用户该徽标是主页链接。

W3C 使用此代码示例：

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C 主页">
</a>

上面的代码是一个可能会在页面顶部遇到的徽标，它也用作返回主页的链接。

W3C 提供的示例替代文本只是简单地说“W3C 主页”，但如果您愿意，它可以更具描述性。

标志和文字主页链接

还有其他类型的徽标链接，其中有一个图像徽标和旁边或下方的文本，并且图像和文本都在相同的链接代码中编码。

换句话说，没有两个链接，例如一个用于徽标的链接和一个用于文本的链接，它只是一个用于徽标和文本的链接。

在这种情况下，由于文本描述了链接的功能，因此重复徽标链接的功能将是重复的。

因此，对于这种情况，最佳做法是使用空替代文本。

这是 W3C 提供的示例：

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> W3C 主页
</a>

请注意如何为图像编码 alt 属性：

 img src="w3c.png" alt=""

替代文本的空引号称为空替代属性（或空替代文本）。 屏幕阅读器会简单地跳过它。

空替代文本好的原因是因为有描述链接功能的文本：

W3C 主页

图标链接的替代文本

有时链接是图标的形式，没有文字来解释它的作用，例如信封形式的图标（代表电子邮件或消息）或打印机（表示链接激活打印机）。

对于这种情况，描述图像是什么（如信封或打印机）是一种不好的做法。

最佳做法是描述图像的作用（发送电子邮件或打印网页）。

W3C 使用带有以下代码和替代文本的打印机图标示例：

 <a href="javascript:print()">
<img src="print.png" alt="打印此页">
</a>

如您所见，打印机形状的图标具有“打印此页”字样作为替代文本。 它告诉图标的作用。 这很有帮助。

按钮的替代文本

与图标示例类似，按钮图像的替代文本应描述图像的作用。

W3C 使用带有放大镜作为提交按钮的搜索框的示例。

不好的方法是使用替代文本来描述图像是放大镜。

最佳做法是使用替代文本来描述图像的作用。

这是 W3C 作为示例显示的示例代码：

 <input type="image" src="searchbutton.png" alt="搜索">

如您所见，搜索按钮的替代文本是单词“搜索”，它描述了按钮的功能。

按钮和徽标的替代文本

Lizzi 和 John 没有详细说明如何处理徽标和按钮的不同场景。

然而，约翰确实指出按钮和徽标的替代文本没有 SEO 价值，它是为了可访问性。

最佳做法是适当地为使用屏幕阅读器访问网页的用户提供功能性网页。

如前所述，使用屏幕阅读器的人可以是您的企业或网站的客户或拥护者。

因此，使用可访问性最佳实践对底线有好处。

引文

在 W3C 了解有关按钮和徽标的可访问性的更多信息

功能图像

合并同一资源的相邻图像和文本链接

在用作提交按钮的图像上使用 alt 属性

在 15:57 分钟处收听 Search Off the Record 播客：

Shutterstock/Evgeny Atamanenko 的特色图片