第二十一天:忽略卡位图片
许多设计师喜欢用透明的卡位图片来控制网页在视觉性浏览器上的排版效果。你当然也可以随意使用,但是同时也该在每一个卡位图片上明确地指定空的 alt
属性,这样子那些非视觉性浏览器才知道要忽略掉这些东西。
谁因此获益?
Marcus 从中获益了。因为在预设的情况下, Lynx 会在任何图片未包含有
alt
属性时,显示出这些图片的档名。许多有名的网志模版甚至在站台名称之前就会先用了许多的卡位图片了。你在视觉性浏览器上当然不会注意到他们,但是 Marcus 看到的却可能像这样:[shim.gif] [shim.gif] [shim.gif] [shim.gif] Welcome to My Web Site [ciblueHeader2.gif] [ciblueCurve2.gif]
Jackie 从中获益了。因为在预设的情况下, JAWS 会在任何图片未包含有
alt
属性时,念出这些图片的档名。如果你觉得 Marcus 那样子就算被干扰到了,试想一下 Jackie 听到的是些多么繁杂的东西:graphic shim dot gif graphic shim dot gif graphic shim dot gif graphic shim dot gif welcome to my web site graphic c i blue header two dot gif graphic c i blue curve two dot gif
如果你在现实世界里也用这种方法介绍你自己的话,就再也没有人会理你了。
怎么做
Radio 的使用者今天可以放假一天;因为上星期一的课程里, Radio 已经会在所有的卡位图片里自动产生空的 alt
属性了。(真是多谢 Jake 了)。如果你检视主页源码时,没有看到任何卡位图片里有 alt=""
的话,请更新 Radio.root 并重建你的站台。
其他出版工具的使用者应该在你们的模版里,寻找后面跟着像是“ spacer.gif
”、“ shim.gif
”、“ 1.gif
”之类的图档档名、或其他在模版里出现了很多次且每次 width
和 height
属性都不同的图档档名的 <img>
标签。
举例来说,每一个卡位图片看起来都可能像这样:
<img src="spacer.gif" width="1" height="10">
请改成这样:
<img src="spacer.gif" alt="" width="1" height="10">
如果你重复使用了相同的卡位图档好几次,可能用全域搜寻和取代会是最简单的。
不可以做的事
不可以定义成
alt=" "
。alt
属性应该是空字串,而不是一个空白字元。不可以在你的
<body>
标签里指定alt
属性,就算你在那里定义了背景图片也一样。对于所有的非视觉性浏览器来说,这个背景图片本来就都会被忽略掉。这种标签看起来就像:<body background="http://网址/指到/image.gif">
不可以在
<td>
标签里指定alt
属性,就算你在那里定义了背景图片也一样。对于所有的非视觉性浏览器来说,这个背景图片本来就都会被忽略掉。这种标签看起来就像:<td background="http://网址/指到/image.gif">
延伸阅读
- WebAIM: How to Create Accessible Graphics.