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

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

你站台上每个页面里的每一张图片，都该提供足以取代的文字部分，也就是所谓的“ 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 在他的站台标帜上有一个中文字的图形。 alt="Site logo: xin, the Chinese character for heart".
Leslie Harpold 在页面标帜用了包含站台名称“ 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 在他的页面标帜上用了一个包含站台名称及标语的图形。他的 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