思洋互动网站建设学前班

网页亲和力在做些什么

将网页亲和力付诸实践，意味着对网页内容各个细节的谨慎与坚持。举例来说，网页中几乎所有的非文字内容如图片等，都可以另外提供一份用文字表达的替代内容，这种替代内容常称做“替代文字”或“alt 文字”，因为多半是通过(X)HTML 组件中的alt 属性来撰写的。                          广州网站建设

补充说明

本书第 5 章“图片与动态图片”及第 6 章“特殊图片”将对 alt 属性及其他关于图片的亲和力实践有更深入的解说，读者在此先注意 alt 属性所展现的效果即可。

以网页上充斥的图片为例，有些图片仅仅作为装饰，有些图片则要用来表达重要的内容意义；有些用户因为种种缘故（例如眼睛疾病、信息软件或硬件无法支持等）而看不到这些图片，就得靠这些替代文字来取用图片内容。具有替代文字的图片，在网页源代码中看起来可能像这样：                          广州网站建设

1. <img src="up.png" alt=" 上涨" /> 

在一般的图形式网页浏览器（例如 Opera、Firefox、IE 等）中，如果关闭图片显示，或者在网页已加载而图片还没下载的时候，上述这段网页源代码就会在原本显示图片的区域内，显示出“上涨”这两个字。在纯文字浏览器（例如 Lynx 等）中，则会直接显示出“上涨”这两个字，并可能以不同于网页内文的其他色彩来表达。如果用的是语音浏览器，或者以读屏软件（例如 JAWS、Window-Eyes 等）搭配一般网页浏览器时，就会把这张图片念做“上涨”。                     广州网站设计

因此，在所有无法看到图片的情况下，不论这个限制是来自用户还是软/ 硬件，用户都能够了解这段内容的意义。事实上，由于有了这个替代文字，因此在搜索引擎（例如谷歌等）中输入“上涨”，就可以找到这张图片，以及含有这张图片的网页。

由于网页设计者在亲和力上下了功夫，所以不论图片有没有显示出来，网页内容都同样能传达给用户。

如果撰写网页时没有帮这张图片加上替代文字，就会产生一些麻烦。以图 1-1 为例，这是某个股市行情网页上的一个表格。                     广州网站设计

图 1-1 股市行情网页上的一个表格

这个表格中运用图片来表达股价的涨跌情况；如果网页设计者为这些图片妥善撰写了替代文字，则关掉图片显示功能时，浏览器将会绘制出图 1-2 所示的画面。

图 1-2 未加载图片时，会显示出替代文字的内容

纯文字浏览器的结果则会如图 1-3 所示。

（点击查看大图）图 1-3 纯文字浏览器会直接取用图片的替代文字

在这两种情况中，图片内容改以文字表达，因此用户仍然能够理解及使用网页内容。如果没有替代文字，同样的网页就会如图 1-4 所示。

图 1-4 未指定替代文字时，信息内容将难以取用

原本应该是图片内容的区域，显示为“图像”字样（某些版本的浏览器会直接显示出图片的文件名），让网页内容变得难以理解，视障用户更是完全没办法使用网页。

正如上述范例所示，撰写网页时提供额外的细节，就是一种网页亲和力的实践，而视障用户则是最直接的受惠对象。除了视障用户能从网页亲和力中获益外，有其他障碍的人也需要网页亲和力。例如听障用户无法听到网页影片的对白，这时候如果能够提供额外的字幕文件，并且以同步的方式播放，就能够让听障用户了解影片内容（请参见第 7 章与第 8 章的说明）；任何无法听到声音（例如上班中而不能打开计算机音箱或声卡发生故障）的用户，以及搜索引擎，也都能利用这个额外的字幕文件，取用网页媒体内容。