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

我对于居然有这么多知名站台用了用户端影像地图而大感震惊。我自己根本不会用这种东西，而且我不认为会有任何预设的网志模版使用这个技巧，但是真的有不少人提出来了。如果你不知道影像地图是甚么， 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