1.1 什么是网页亲和力

互联网的发明，改变了整个世界，将许多本来不可能完成的事情化为可能。万维网（World Wide Web，WWW）又把这个影响力往前大幅推动：先是改变了人们对“文件”的想象与使用，接着多媒体及互动艺术也借由网页成为互联网的一部分。现代的网页可以用来听歌、买书、购票，乃至于聊天、玩游戏、处理文件、项目管理，甚至找停车位，是为Web 2.0风潮。

网页上能做的事越来越多，网页却未必越来越好用，有些失败的网站一点儿也不好用，因此乏人问津；还有许多网站则像是专门为某些特定人士打造一般，对多数用户而言好像隔了一层阻碍，有一种距离感而难以亲近，这实在算不上成功的网站。

举例来说，视频聊天网站，理应能让肢体不便的人，有机会与其他人面对面地聊天，而不用大费周章地走出户外、移动到世界各地；但是许多这类的网站并未设计妥当，用户必须仰赖精细的手部操作，用鼠标或键盘来启用视频聊天的功能。结果，肢体不便的人仍然无福享用这些网络技术带来的便利。

又例如在线上书柜网站勾勒出的愿景中，人们不用起身走到自己的书架前，也不用跑去书店或图书馆，就可以实时取得书籍内容，加以查阅运用；但是许多这类的网站并未设计妥当，结果视力不好的用户没办法把文字放大，对屏幕阅读不适的用户没办法撷取内容用打印机印出来，撰写期刊论文的用户引用文献的时候没办法直接把这些内容以数字方式复制，而得自己誊写一遍……结果此类网站除了可以查询某段内容在哪本书的哪一页之外，用户还是得取得实体书本翻阅使用，原本将书籍内容数字化放到网页上的用意也就浪费了。

为了解决这样的窘境，陆续有人投入“网页亲和力”的研究，研究如何让网页对人们更为亲善、使内容便于被使用，尊重用户的主观介入，让用户感到自在舒适，并且能依其需求及指定的方式，来运用、更改网页的内容、结构或行为。

1.1.1 网页亲和力在做些什么

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

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

<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章的说明）；任何无法听到声音（例如上班中而不能打开计算机音箱或声卡发生故障）的用户，以及搜索引擎，也都能利用这个额外的字幕文件，取用网页媒体内容。

1.1.2 网页亲和力涉及的议题

除了要顾及内容在各种不同的媒体上表达外，输入也是网页使用上不可或缺的一环，也是亲和力议题的范畴。一般来说，具有亲和力的网页设计，较不会仰赖特定的输入设备；也就是说，不会做出非要用鼠标不可的设计。肢体残障、行动不便的用户，以及使用手机等设备上网的用户，都是这种“与设备无关（Device Independent）”设计理念的主要受惠对象。

除了网页编写的实务细节外，网页浏览器（以及其他软硬件）要如何支持这些设计，还有网页设计软件要如何落实这些考量，也都是网页亲和力的实际工作事项。

肢体不便、视力不良、阅读障碍等身心能力有所缺损的用户，是网页亲和力的第一批受惠者，也是网页亲和力的实施中最显眼的目标族群。但网页亲和力不是达到“网页无障碍”就足够了；不论是否是身心障碍人士，任何人都可以从网页亲和力中获益。

日常生活中处处充满着对亲和力的需求。搭乘飞机、高铁等交通工具时，帮你打理各种特殊需求的服务人员就是这亲和力的一环；走道上铺设的地毯、座椅的坐垫、扶手、窗户的窗帘、放置小物件的空间、可调整的照明、空调、座椅等，通通都是基于亲和力的考量而存在的──虽然没有任何一项是不可或缺或无可取代的，但若缺少了其中任何一项，都会让旅行体验变得非常糟糕。

亲和力也影响这本书的阅读体验。如果纸张严重反光、字太小、行距过挤、灰度或色彩的对比不足、装订不佳、书本太厚或太重、用字遣词过于艰涩冷僻，或者是改以克林贡文 撰写，相信本书就会形同废物，就算内容再好，也没人能读得下去。

使用计算机时，键盘及鼠标的操作是否容易、屏幕显示是否清晰易读、各种程序的行为能不能按照需求自行调整，就连画面或文件能不能用打印机漂漂亮亮地打印出来，通通都是亲和力所面对的课题。在各个不同的领域中，亲和力都是设计的一环。亲和力设计的共同目标是：让用户与整个环境有更多互动的体验，感到舒适，甚至要能乐在其中。

网站在其设计及开发的生命周期中，有信息架构师、用户体验及亲和力策略专家、视觉设计师及技术开发者、文案作家和编辑等不同角色参与，每个人都该注意亲和力议题。以文字、链接、照片、音频和视频等各种形态表达的内容，是任何网站的基础，如何确保所有的内容都具有亲和力，则仰赖全体人员的努力与合作。形形色色的知识与技术必须加以整合，让所有与网页设计有关的人，不论是出钱的投资者，做决策的主管，乃至于撰写每一行程序、网页源代码的设计师与开发者，都能够对网页亲和力的概念加以理解，正视其影响力，并能用正确的方式，制作出具有亲和力的网页。