为图片编写有效的 ALT 文本

引言

任何了解网络可访问性的人都知道，图片需要分配替代文本，即 ALT 文本。这是因为屏幕阅读器无法理解图片，而是会朗读分配给它们的替代文本。在 Internet Explorer 中，我们可以通过将鼠标悬停在图片上并查看出现的黄色工具提示来看到这个 ALT 文本。其他浏览器（正确地）不会这样做。用于插入 ALT 文本的 HTML 是

<img src="filename.gif" alt="Alternative description goes here">

但是，编写图片的 ALT 文本一定有技巧吗？你只需要放一个描述在那里就万事大吉了，对吧？嗯，差不多是这样。当然，这并非高深莫测，但你确实需要遵循一些指南……

分隔图片和缺失的 ALT 文本

分隔图片应始终分配 null ALT 文本，即 <CODE>alt=""。这样，大多数屏幕阅读器会完全忽略该图片，甚至不会宣布它的存在。分隔图片是网页中常用的不可见图片。顾名思义，它们的作用是在页面上创建空间。有时无法创建所需的视觉显示，这时你就可以插入一张图片（指定其高度和宽度），然后 voilà，你就有额外的空间了。

并非所有人都为分隔图片使用这种 null ALT 文本。有些网站会插入alt="spacer image"。想象一下，这对屏幕阅读器用户来说是多么烦人，尤其是当它们连续出现十个时。屏幕阅读器会连续说十次“Image, spacer image”（屏幕阅读器通常会在朗读其 ALT 文本之前说“Image”这个词），这根本没有帮助！

其他网页开发者则简单地省略了分隔图片（以及其他图片）的 ALT 属性。在这种情况下，大多数屏幕阅读器会朗读文件名，可能是“newsite/images/onepixelspacer.gif”。屏幕阅读器会宣布这张图片为“Image, newsite slash images slash one pixel spacer dot gif”。想象一下，如果有十张这样的图片连续出现，那会是怎样的声音！

项目符号和图标

项目符号和图标应与分隔图片类似处理，因此应分配 null 替代文本，即 <CODE>alt=""。想象一下一个项目列表，每个项目前面都有一个花哨的项目符号。如果为每张图片分配的 ALT 文本是“Bullet”，那么屏幕阅读器将在每个列表项之前朗读“Image, bullet”，这将使完成列表所需的时间更长。

图标，通常用于补充链接，也应分配alt=""。许多网站会将图标放在链接文本旁边，并使用链接文本作为图标的 ALT 文本。屏幕阅读器会先宣布这个 ALT 文本，然后再宣布链接文本，从而重复两次链接，这显然是不必要的。

（理想情况下，项目符号和图标应作为背景图片通过CSS文档加载，这将从HTML文档中完全移除它们，从而无需任何 ALT 描述。）

装饰性图片

装饰性图片也应分配 null 替代文本，即 <CODE>alt=""。如果一张图片纯粹是视觉上的点缀，那么屏幕阅读器用户就没有必要知道它的存在，仅仅被告知它的存在就会增加噪音污染。

反之，你也可以认为网站上的图片营造了品牌形象，而隐藏它们则剥夺了这部分用户的相同体验。可访问性专家倾向于前者，但后者也确实有其合理之处。

导航和嵌入在图片中的文本

需要花哨文本的导航菜单别无选择，只能将文本嵌入图片中。在这种情况下，ALT 文本不应该用来扩展图片。在任何情况下，ALT 文本都不应该说“Read all about our fantastic services, designed to help you in everything you do”。如果菜单项是“Services”，那么 ALT 文本也应该是“Services”。ALT 文本应始终描述图片的内容，并逐字重复文本。如果你想扩展导航，就像本例一样，可以使用title 属性。

对于嵌入在图片中的任何其他文本也是如此。ALT 文本应简单地逐字重复图片中包含的文本。

（除非使用的字体非常独特，否则通常没有必要将文本嵌入图片中——现在可以使用CSS.)

公司 Logo

网站在为 Logo 应用 ALT 文本方面各有不同。有些说“Company name”，有些说“Company name logo”，还有些描述图片的功能（通常是链接回主页），“Back to home”。请记住，ALT 文本应始终描述图片的内容，所以第一个例子alt="Company name"，可能是最好的。如果 Logo 是一个链接回主页的链接，那么这可以通过 title 标签有效地传达。

结论

编写有效的 ALT 文本并不难。如果是一张装饰性图片，通常应使用 null 替代文本，即alt=""——切勿省略 ALT 属性。如果图片包含文本，ALT 文本应简单地逐字重复该文本。请记住，ALT 文本应描述图片的内容，仅此而已。

同时，请务必保持 ALT 文本简短精炼。使用屏幕阅读器浏览网页比传统方法花费的时间要长得多，因此不要因为冗长且不必要的 ALT 文本而让屏幕阅读器用户的浏览体验变得痛苦。