第二十四天：提供能取代影像地圖的文字

我對於居然有這麼多知名站台都用了用戶端影像地圖而大感震驚。我自己根本不會用這種東西，而且我不認為會有任何預設的網誌模版使用這個訣竅，但是真的有不少人提出來了。如果妳不知道影像地圖是甚麼， Leslie Harpold 在她的主頁面底下就用了一個來當作導覽鏈結。它們全是圖片，但是在「 archives 」這個字上面按一下，就會把妳帶到某一頁；按下「 by category 」就會連到另一頁，以此類推。

影像地圖聽起來像是親和力的夢魘，不過他們並不是。就跟每一個圖片都需要足以取代的文字一樣，每一個影像地圖裡每一個可以按下的區域也都需要一個足以取代的文字。妳可以提供 alt 文字給圖片本身（在 <img> 標籤裡），並且也提供給影像地圖（在跟 <map> 標籤相關聯的 <area> 標籤裡，這些標籤是用來定義哪些區域可以按、以及會連結到哪裡去的）。

誰因此獲益？

Marcus 從中獲益了。因為 Lynx 會把圖片的 alt 文字顯示成鏈結。所以當 Marcus 按下 ENTER 後， Lynx 就會另外用一個單獨的頁面顯示影像地圖裡的鏈結清單。每一個鏈結都會標上影像地圖裡 area 的 alt 文字。如果沒有 alt 文字的話， Lynx 就會顯示每一個 area 的鏈結網址，不過這顯然會變得很難以理解。

如果 Leslie 在她的影像地圖上沒有 alt 文字的話， Marcus 在她的主頁底下所看到的鏈結就會像這樣：

[USEMAP:hpfooter.gif]

從這裡連結出去， Marcus 會看到影像地圖上所有鏈結的清單。因為沒有 alt 文字，所以 Lynx 就祇能顯示每一個網址，他們看起來就會像這樣：
```
[USEMAP:hpfooter.gif]

MAP: http://leslie.harpold.com/#Map

    1. http://leslie.harpold.com/archives.html
    2. http://leslie.harpold.com/category/
    3. http://leslie.harpold.com/links.html
    4. http://leslie.harpold.com/leslie.html
    5. http://www.moveabletype.org
```
然而實際上， Leslie 確實在影像地圖跟每一個區域上用了合適的 alt 文字。所以 Marcus 真正會在她的主頁底下看到的鏈結其實像這樣：

Site navigation links

從這裡連結出去會讓 Marcus 看到像是這樣的頁面：
```
Site navigation links

MAP: http://leslie.harpold.com/#Map

    1. previously...
    2. by category
    3. about the site
    4. about leslie
    5. Powered by Movable Type
```
Michael 從中獲益了。因為 Links 會把 alt 文字顯示成鏈結的樣子。當 Michael 按下了 ENTER 後， Links 就會彈出一個所有定義在地圖上的鏈結的選單。每個鏈結都會標記著 area 上的 alt 文字。如果沒有這個 alt 文字的話， Links 就會顯示出每個 area 的鏈結，而這看起來將會相當難以理解。
Jackie 從中獲益了。因為 JAWS 會把影像地圖中每個 area 的 alt 文字按照妳在 HTML 源碼裡定義出來的順序顯示出來。 Jackie 可以按下 ENTER 來連結。如果沒有 alt 文字的話 JAWS 就會把每個 area 裡的鏈結位址唸出來。這真的完全的讓人無法理解。（妳有沒有試過在電話裡念超級長的網址？）
Lillian 從中獲益了。因為 Internet Explorer 會在妳的游標滑過每個影像地圖裡的 area 時，用工具提示顯示出 alt 文字。
Google 從中獲益了。因為 Googlebot 會對主要影像以及影像地圖裡每一個 area 的 alt 文字建立索引。同時 alt 文字也是用來判斷妳的頁面是否含有某個關鍵字的重要因子；同時每個鏈結是否跟某個關鍵字有關，也是用 area 裡的 alt 文字來判斷的。

怎麼做

如果妳用了像是這樣的影像地圖：

<img src="footer.gif" width="500" height="212" usemap="#Map"> <map name="Map"> <area shape="rect" coords="203,114,258,129" href="/archives.html"> <area shape="rect" coords="277,113,348,129" href="/category/"> <area shape="rect" coords="364,113,401,128" href="links.html"> <area shape="rect" coords="418,114,488,130" href="leslie.html"> <area shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org"> </map>

請在主影像跟每一個影像地圖裡被連結的 area 加入 alt 文字，像這樣：

<img alt="Site navigation links" src="footer.gif" width="500" height="212" usemap="#Map"> <map name="Map"> <area alt="previously..." shape="rect" coords="203,114,258,129" href="/archives.html"> <area alt="by category" shape="rect" coords="277,113,348,129" href="/category/"> <area alt="about the site" shape="rect" coords="364,113,401,128" href="links.html"> <area alt="about leslie" shape="rect" coords="418,114,488,130" href="leslie.html"> <area alt="Powered by Movable Type" shape="rect" coords="-4,190,131,210" href="http://www.moveabletype.org"> </map>

所有為圖片寫出好的 alt 文字的規則也一樣適用於影像地圖。妳也應該在主要的 <img> 標籤和每個 <area> 標籤裡加入 title="" ，讓視覺性瀏覽器不要出現工具提示。

不可以做的事

不可以建立伺服器端的影像地圖、把影像被點擊的座標資料傳回伺服器做後續處理。這對於 Jackie 這樣子的 JAWS 使用者、或對於使用純文字瀏覽器的 Michael 和 Marcus 、或對於 Bill 這種祇能用鍵盤的使用者、甚至是對於像 Google 這樣的搜索引擎來說，都完全沒有親和力可言。如果妳一定得用伺服器端的影像地圖，那妳也該用真的文字鏈結來新增一個純文字導覽列，讓使用者能夠連結到每一個妳放在影像地圖裡的鏈結。

Dive Into Accessibility