这是整个系列中最重要的一天,所以请睁大眼睛:
你网站上每个页面里的每一张图片,都该提供足以取代的文字部分,也就是所谓的“
alt文字”;这是在<img>标签里用alt属性所加以指定的。
屏幕阅读软件可以读得到这段文字,纯文字浏览器会把这段文字显示出来, Google 会为这段文字建立索引,视觉性浏览器则会用工具提示或者在状态列显示出来(虽然身为设计师的你,还是可以覆写掉这个作用)。我们已经看到要如何指定占位图像的空 alt 文字,还有许多用项目图片建立亲和性高的清单的方法。还有漏掉了些甚么的吗?
- 静态链结图示
- “架站系统”图示
- Mail-to 图示
- XML 图示
- 浮在你的文章项目内的小图形
- 任何其他你加进样本里的图片
这些都需要适当的 alt 文字。
- 小莉 从中获益了。因为 JAWS 会念出
alt文字。如果没有有效的alt的话, 小莉 就会听到档名,而这听起来真的很可怕。- 陈建国 从中获益了。因为 Lynx 这个纯文字浏览器并不会显示任何文字,而只会显示
alt文字。如果没有alt文字的话, Lynx 就会显示档名,这看起来就跟 JAWS 听起来一样糟。- 莫非 从中获益了。因为 Links 这个纯文字浏览器并不会显示任何文字,而只会显示
alt文字。如果没有alt文字的话, Links 就不会显示任何跟这个图片有关的资讯(除非这个图片也是个链结,在这种情况下 Links 就只会显示出“ [IMG] ”)。当使用 Opera 浏览而把图形选项关闭时, 莫非 会在图片的位置看到alt文字。- 马大姐 从中获益了。因为 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!". 这就跟去问盲人时钟上的时间,然后对她说“张开你的眼睛!”图片可能因为某个原因而被关掉(像是 莫非 的频宽不够)、无法使用(像是 陈建国 的纯文字浏览器)、或者连让你决定要不要关掉的余地都没有(像是 小莉 的屏幕阅读软件就只会把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". 请注意:你很可能没有那么酷。请还是保持简单为妙。
- A. J. Flavell: ALT texts in IMG.
- Jukka Korpela: Simple guidelines on using ALT texts in IMG elements.
- Ian Hickson: Mini-FAQ about the alternate text of images.
- Watchfire.com: Provide alternative text for all images.
- All My FAQs Wiki: ALT attribute.
- WebAIM: How to Create Accessible Graphics.
- Martin Schrode: On accessible advertising.
- Section 508 Federal Accessibility Guidelines: What is meant by a text equivalent?