第二十一天:忽略卡位圖片
許多設計師喜歡用透明的卡位圖片來控制網頁在視覺性瀏覽器上的排版效果。妳當然也可以隨意使用,但是同時也該在每一個卡位圖片上明確地指定空的 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.