撰写有意义的替代文本

如果我问别人无障碍设计对他们来说意味着什么，他们通常首先想到的就是“添加替代文本！” 你只需要给图片添加替代标签，就能让网站更易于访问，对吧？我很欣赏大家减少无障碍错误的积极性，但我接下来要说的可能会让你很恼火。这要视情况而定。

添加替代文本或许能避免在无障碍扫描中出现“缺少替代文本”的烦人错误，但这并不一定意味着你的图片含义更清晰易懂。有时，一个空白的替代文本标签反而能让图片更易于访问。你是不是已经想到了那个“震惊”的表情符号或GIF动图？

我当初学习这方面的知识时也有同样的感受，这让我意识到自己之前给别人提供了多少关于如何修复替代文本的错误建议。希望写完这篇博文后，我的良心能够得到安宁！我以前总觉得每一张图片都必须添加替代文本，却从未认真思考过如何编写。我很乐意分享一些技巧，不仅能帮助大家避免无障碍设计方面的错误，还能帮助大家更深入、更策略性地思考如何为视障用户提供最佳体验。

我有一些撰写更佳替代文本的策略，我通常会问自己以下问题。

它是装饰品吗？

在大家开始深入研究内容管理系统（CMS）的媒体库之前，我首先想让大家思考的并非技术层面的问题，而是策略层面的问题。这张图片存在的目的是什么？如果我们移除这张图片（针对视力正常的用户），我们还能获取到所需的信息吗？我之所以首先提到这一点，是因为在开始操作之前，这个问题其实很容易问自己。让我们先来看一个很多机构网站都有的实际例子——人物简介页面。

假设我们的网站上有一个“团队”页面，我们可以点击链接进入该团队成员的页面，了解更多信息。我们点击进入CEO的页面，页面上会显示CEO的头像。很多时候，CEO的照片不会影响无障碍测试，因为页面替代文本（alt text）中会包含类似“CEO John Paul的照片”这样的信息。但对于这类头像来说，这些信息对视障人士来说几乎毫无用处，而且是多余的。所有关于CEO的重要信息可能都直接显示在照片旁边。这样一来，这张照片就成了装饰性的，因此一个空的alt属性就足够了。

另一种需要考虑使用空白替代文本的情况是使用图像图标时。需要注意的是，我所说的图像图标并非指使用 Font Awesome 之类的图标字体。请看下面的例子：

来源：重构用户界面

在这种情况下，我们使用这些图像图标并非为了传达任何含义，而仅仅是为了装饰“强大功能”列表中的每个条目。这增添了一些设计美感，但并没有增加任何视障用户会错过的语法价值。

从同理心的角度来看，给装饰性图片添加非空替代文本，对视障用户来说有什么意义？如果我是他们，想了解图片的强大功能，听到那些对我毫无价值的图片文字，我会感到恼火。这通常是我思考某个东西是装饰性的还是有实际用途时会问自己的问题。

这张图片的背景是什么？

在考虑描述符之前，有时我们需要先问自己一个问题：形式还是功能？有时最简单的思考方式是：“这是一个链接或按钮，还是内容？” 当然，这并不能涵盖所有情况，但问问自己它是否具有某种功能（例如跳转到另一个页面）或描述某些内容以补充上下文，通常是一个很好的起点。

能做事情的图像

首先，我们来看一个例子。这里我们来看下面的代码。这是一个指向该组织Facebook页面的Facebook图标。目前，它没有任何替代文本。

<a href="https://www.facebook.com/DrupalGovCon">
  <img src="facebook.svg">
</a>

有时人们会忍不住想在这里添加描述图片的替代文字。例如：

<a href="https://www.facebook.com/DrupalGovCon">
  <img src="facebook.svg" alt="facebook icon">
</a>

问题在于，描述图片并不能真正帮助用户理解它的作用。使用屏幕阅读器的用户或许能够根据网站其他内容推测出链接指向哪里。但是，我不想让用户猜测，我希望他们清楚地知道！点击这张图片，就会跳转到 DrupalGovCon 的 Facebook 页面。让我们确保所有用户，无论视力如何，都能清晰地知道这个链接指向哪里：

<a href="https://www.facebook.com/DrupalGovCon">
  <img src="facebook.svg" alt="Go to the DrupalGovCon Facebook Page">
</a>

描述事物的图像

现在我们来看一个例子。我真的很喜欢关注美食博主（虽然我通常很讨厌他们的页面加载速度，哈哈），看看他们分享了哪些食谱。说实话，这并不是我关注的美食博主，但我谷歌搜索了“最佳布朗尼食谱”，这是我找到的第一个食谱。我的天哪，光看照片，这些布朗尼看起来就太诱人了！

来源：Cafe Delights

你会如何为这张图片创建替代文字？现在正是发挥创意的好时机！因为这是位美食博主，你可能需要用一些听起来很诱人的方式来描述它，让读者忍不住想：“就算要减少糖的摄入，我也要马上做这些布朗尼！”

我做了以下事情：

<img src="Best-Fudgiest-Brownies-IMAGE-1001.jpg" alt="Gooey, fudgy chocolate brownies with melted chocolate dripping throughout">

你们的内容策略是什么？

我们是否为文案中嵌入的图片撰写替代文字？这张图片是否是设计师特意用来传达我们品牌信息的图片？我们需要考虑哪些人参与这些决策，因为我们希望由他们来撰写替代文字。

就像美食博客一样，假设你正在与一家出版社合作，推广一本新的烹饪书。假设市场部花费了大量时间，通过焦点小组、问卷调查等方式研究目标受众。然后，他们投入大量精力制定营销计划，并认为视觉效果对营销至关重要。他们与一位摄影师合作，拍摄了一些美味食谱的新照片。难道你不希望这些照片的用途能够通过辅助技术得到体现吗？我们可能希望用电视烹饪节目主持人描述食谱的方式来描述：“辣味意大利香肠和辣椒，配上大量的欧芹和百里香。”

难道你不希望这些照片的用途能够通过辅助技术得到体现吗？

这就是为什么策略比技术层面更重要。这意味着你应该与市场策略团队合作撰写替代文本。这也是为什么设计团队应该参与品牌图片的设计以及图片放置的原因。如果没有这些团队，至少我们也应该考虑图片的用途。我最喜欢的例子是WebAim文档中关于替代文本的示例（见右侧）。这里有一张乔治·华盛顿在战斗中的照片，但如果我们在一个历史网站或一个艺术网站上，这张照片的替代文本就会截然不同。

别想太多

如果你在这方面遇到困难，不妨在撰写替代文本时尝试运用以下三种策略。这可以降低你过度思考的可能性（坦白说，我在这方面可是出了名的）。撰写替代文本的策略与你对策略的思考密切相关。记住，这是一个不断完善的过程。你的替代文本会随着时间的推移而调整和改进。

希望您喜欢我分享的替代文本处理方法！如有任何疑问，欢迎随时在Twitter上联系我。