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

這是整個系列中最重要的一天，所以把照子放亮點吧：

妳站台上每個頁面裡的每一張圖片，都該提供足以取代的文字部分，也就是所謂的「 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