网页设计中的包容原则

网页设计中的包容原则

设计师的工作一直与“可视性（affordance）”有着密切的利害关系。这个词自唐纳德•诺曼（Donald Norman）的名著《设计心理学》[注1]后便声名鹊起，之后更是被阿兰•库伯（Alan Cooper）的《交互设计精髓》[注2]一书带入用户界面设计社区。

注1: The Design of Everyday Things, 直译为“日常用品的设计”。“可视性”一词即沿用的本书中文版的翻译。

注2: About Face，交互设计名著，目前已出到第三版。

可视性允许我们一见到某事物就直截了当地知道如何与其交互。例如，当我们看到一扇门旁边的小按钮时，我们会马上意识到这是要用指头来按的；常识又告诉我们，一旦按下去就有声响发出，然后房间里的人就会知道“有人正站在门外呢”。把这一概念移植到视觉设计领域：当我们在网页上看到一个有3D样式的按钮时，我们立马就能明白这是一个可以用鼠标来“按”的东西。

可视性仅仅是成功的一半

设想这样一种情景：人们虽然能轻松懂得如何使用某件物品，但是却缺乏执行操作的能力。绝大部分坐轮椅的人都知道楼梯应该怎么用，但楼梯的“可视性”无助于他们爬上楼梯。这时，问题便出现了。

相反，杂货店的宽大自动门对于有或没有特别通过需求的人

都具可视性，并且能被二者轻松使用。我们把这种可视性和广泛亲和性[注3]（all-embracing accessibility）的结合称为“通用设计（universal design）”。在通用设计中，自觉的可视性——也就是对如何与物品进行交互产生的隐式理解——实则与用户执行操作的能力相辅相成。因此，通用设计天生具有亲和性（inherently accessible）。

注3: Accessibility，表示用户获取所需内容（结果）的容易程度。根据语境，可翻译成“可访问性”、“亲和性”、“可及性”，等等。下面译文中出现的这三个词都表示英语中的“Accessibility”。Accessible 又表示“无障碍的”、“可访问的”。

有些设计师觉得通用设计限制了他们的创新。他们争辩说，要满足通用性，就必须从“最底层的用户（neediest-user）”出发进行设计。要设计一部对老年人和青少年都方便使用的电话，那我们就必须先考虑老年人的需求：大的数字按键，大的显示屏等等；然而一旦我们这么做了，那些年轻的消费者，那些“潮人”们，可能就对这电话没有购买欲了。如此，设计的最终结果就是一件只对某特定社群有用的产品——我们达到了无障碍设计（accessible design）的要求，但不能算是通用设计。设计的可及性非常重要，却无法通过一种方式就满足所有人。因此，明智的做法是，在任何时候都尽量争取可行的通用设计，而只在必要的时候专注于无障碍设计。

无障碍设计的困境

这种差别在Web设计中意味着什么？“通用设计”和“无障碍设计”在什么情况下会被广泛认为是对等的？无障碍设计元素包括视频的说明字幕（caption）和音频文件的文字副本（text transcription）。它们被用作原始内容必需的替代品。另一方面，结构化标记（structural markup）则是一个实现通用设计的有力技巧。使用h1和h2这样的实义标签来按照逻辑关系组织内容，有助于形成可访问性，因为读者总是习惯在阅读文字前先扫描标题。设计师能创建独特的标题样式，却是由用户个人来决定要不要接受设计师的想法。他们大可以关闭图片显示或者在运行过程中替换掉你的样式。

话说至此，对很多设计师来说，因通用设计产生的交互过程的不可预见性会带来很多麻烦。他们怨声载道——“我完全不知道屏幕阅读器是如何工作的”，诸如此类。作为设计师，我们始终没能完全了解可访问性或者通用性究竟意味着什么。要改变局面，就必须先改变我们看待任务的方式。

不得要领

网页设计师通常喜欢在页面底部加一些文字和一个到第508条[注4]的小超链接来宣告其网页的可访问性。当然，这也是一项符合法律精神的实践。他们的说明大概都是这样写的：“我们尽力让本站能无障碍访问。我们会持续测试和修改站点的可访

问性。如果您在访问任何内容时遇到困难，请尽管联系我们。”但只要稍微做点可访问性测试就会发现，很多站点拥有者和开发者都只是想靠声明的后半部分来轻松逃脱入狱的危险[注5]。

注4: Section 508，美国推行的保障残障人士能够有效使用电子和信息产品的法律。台湾也有类似的法案，请参看维基百科网页亲和力条目。

注5: 没有达到无障碍访问要求的站点会受到法律制裁，作者在此讽刺部分开发者对可访问性不够重视。

网站开发者们有时候以为，采用基于标准的开发原则，利用外部CSS和基于DOM的浏览器脚本技巧分离表现层和行为层，再为图片加上alt属性，就算达到第508条要求了。除非遇到问题的访客找上门来，他们是不会想在网站的可访问性上多花精力的。这里的逻辑似乎很公平：好的商业实践总是将各种需求按照项目约束条件和预期投资回报率（ROI）进行优先级排序。尽管规范的编码有助于达到无障碍要求，也必须有正确的施行意图才会产生效用。

以alt属性为例。所有正规的HTML编辑器和验证工具都会指出缺少alt替换文本的错误。大部分开发者也会纠正这个错误——不管是出于通过验证的目的还是为了获得可访问性。不过，通过验证并不等同于获得了可访问性。W3C的HTML5规范(草案) 明确指出了这一点，并详细示范了如何撰写基于功能和上下文的替换文本。你也许要反驳说大部分开发者都了解这一区别，

但很多网站的表现恰好说明事实并非如此。

可访问性：分寸之末

就在不久前，一个流行的Web开发论坛上的一篇帖子引起了我的注意。帖子题目是“在标签里使用alt和使用title 的对比，Firefox里的alt不起作用”。一些回复让我震惊了，比如下面这条（不是因为他蹩脚的语法）：

Alt被要求去验证，但是除非是政府网站，并没必要使用alt 标签。除非信息实在重要，并且相等的信息发挥了作用，这作用到底是什么也不重要了……

Alt attributes are required to validate, but unless it is some sort of gov’t website they are not required to use alt tags unless the information is vital and the equal information act, or whatever that act is called.

（囧，确实蹩脚，根本不知道他到底想说个啥……）

就我在论坛上的回复，我提到了国家盲人联合会（National Federation of the Blind, abbr. NFB）对Target公司的集体诉讼[注6]。最终，Target支付了大量金钱，并且同意对他们的网页开发者进行昂贵的关于可访问性的强化培训。

注6: Target是一家零售企业，在美国各地都有连锁店。NFB控告他们的网站不方便盲人获取信息，并且让盲人无法实现线上购物。关于alt和title的问题，另外推荐Rexsong的使