第二十三天：提供能取代图片的文字

这是整个系列中最重要的一天，所以照子放亮吧：

你站台上每一个页面里的每一张图片，都该提供足以取代的文字部分，也就是所谓的「 alt 文字」；这是用 <img> 卷标里用 alt 属性所加以指定的。

屏幕朗读软体可以读得到这段文字，纯文字浏览器会把这段文字显示出来， Google 会为这段文字建立索引，视觉性浏览器则会用工具提示或者在状态列显示出来（虽然身为设计师的你可以覆写掉这个作用）。我们已经看到要如何指定卡位图片的空 alt 文字，还有许多用项目图片建立亲和性高的清单的方法。还有甚么我们漏掉了的吗？

静态链结图标
「架站系统」图标
Mail-to 图标
XML 图标
浮在你的文章项目内的小图形
任何其它你加进样本里的图片

这些都需要适当的 alt 文字。

谁因此获益？

Jackie 从中获益了。因为 JAWS 会念出 alt 文字。如果没有有效的 alt 的话， Jackie 就会听到档名，而这听起来真的很可怕。
Marcus 从中获益了。因为 Lynx 这个纯文字浏览器并不会显示任何文字，而祇会显示 alt 文字。如果没有 alt 文字的话， Lynx 就会显示档名，这看起来就跟 JAWS 听起来一样糟。
Michael 从中获益了。因为 Links 这个纯文字浏览器并不会显示任何文字，而祇会显示 alt 文字。如果没有 alt 文字的话， Links 就不会显示任何跟这个图片有关的信息（除非这个图片也是个链结，在这种情况下 Links 就祇会显示出「 [IMG] 」）。当使用 Opera 浏览而把图形选项关闭时， Michael 会在图片的位置看到 alt 文字。
Lillian 从中获益了。因为 Internet Explorer 会用工具提示的样子显示 alt 文字（当然身为设计师的你可以让这件事不要发生）。
Google 从中获益了。因为 Googlebot 会对 alt 文字建立索引；这不仅对一般的搜寻有效，更会用于图片搜寻里（不然你以为那是怎么办到的？）

怎么做

预设的 Movable Type 样本不会包含任何的 <img> 卷标；如果你用了「 Powered by Movable Type 」图形的话，你就该确定 <img> 卷标里同时也包含了 alt="Powered by Movable Type" 属性。

预设的 Greymatter 模版祇包含了一个图片，这是由 {{gmicon}} 模版变数所产生的。实际上会产生一个 <img> 卷标，同时还会包含有合适的 alt 文字：「 Powered by Greymatter 」。

Radio 会为下列的图标自动产生合适的 alt 文字：

XML 咖啡杯： alt="Subscribe to <site name> in Radio UserLand."
XML 图标： alt="Click to see the XML version of this web page."
Mailto 图标： alt="Click here to send an email to the editor of this weblog."

然而 Radio 的使用者还得需要手动为自订图片指定 alt 文字。请到 Prefs ，然后按下 Customized Images （在 Templates 李），然后新增这些 alt 属性：

Day-level permalink: alt="Permanent link: <%longDate%>".
Item-level permalink: alt="Permanent link".
Source link icon: alt="source".
Enclosure link icon: alt="enclosure".

你同时也该增加一个 title="" ，用来让视觉性浏览器不要显示工具提示。

当然，不论你用了甚么出版工具，如果你在模版里增加了你自己的图片，或者你的文章项目里会浮著小图形的话，他们都该有个合适的 alt 文字。因为我从范例里学得最好，所以这里就是一些范例。更多泛用的原则和范例会被列在「延伸阅读」的小节里。

`alt` 文字的不良示范

对于任何 HTML 标记来说， alt 文字都祇能够有纯文字纯在，不能有任何卷标。
alt="filename.jpg". 这不能提供我们任何信息。图片的功能是甚么？我们并不真的在乎它叫甚么名称。
alt="alt text". 这是由某些 HTML 编辑器所插入的、用来提醒的文字，显然是被某些没概念的设计师遗留下来了。
alt="Click here!". 没有甚么太有用的功能（除非图形上面写的也就是「 Click here! 」）。
alt="Turn images on!". 这就跟去问盲人时钟上的时间，然后对她说「张开你的眼睛！」图片可能因为某个原因而被关掉（像是 Michael 的频宽不够）、无法使用（像是 Marcus 的纯文字浏览器）、或者连让你决定要不要关掉的馀地都没有（像是 Jackie 的屏幕朗读软体就祇会把 alt 文字大声念出来）。
更多 alt 文字的不良示范。

`alt` 文字的良好示范

Jonathon Delacour 在他的 banner 上有一个中文字的图形。 alt="Site logo: xin, the Chinese character for heart".
Leslie Harpold 在页面 banner 用了包含站台名称「 The Historical Present 」和标语「 Hypermodernism has a posse 」的图形。 alt="the historical present: hypermodernism has a posse".
Simon Willison 用了一个「 W3C XHTML 1.0 」贴纸。 alt="Valid XHTML 1.0!"
Jeffrey Zeldman 用了像文字的图形来当导览列，拉下来的时候，每一个图形都会用 Javascript 在状态列放上一小列标语。当然视盲的读者会错过这些东西，所以 Zeldman 也在每一个图片上用了 alt 文字放进相同的标语。真邪恶。
Dean Allen 在他的页面 banner 上用了一个包含站台名称及标语的图形。他的 alt 文字也一样长，但却包含了略微不同的标语（当然会造成一些混淆），不过 Dean 确实酷到可以侥幸成功的地步。 alt="Textism is an ephemeris focused on the composition, design, and reading of text. In addition, there will be pie". 请注意：你很可能没有那么酷。请还是保持简单为妙。

Dive Into Accessibility