济南盈讯科技有限公司

25. 可访问性基础知识

序言

在你创建网站的时候，网站的可访问性——也就是使该网站对所有人都可用，无论他们是否残疾——应当始终是你关注的焦点。虽然你可能还没有意识到这一点，但是迄今为止本教程中出现的每个例子都体现着可访问性；在本文中我将对可访问性进行详细地探讨，这样你就可以充分地理解什么是可访问性，为什么它那么重要，怎样才能确保网站是可访问的，以及用什么准则来界定网站到底是不是可访问的。本文目录如下：

• 什么是可访问性？
• 为什么可访问性很重要？
  • 可访问性的法律义务
  • 潜在市场
  • 搜索引擎
  • 道德规范与品牌
• 做设计时要时刻牢记可访问性
• 互操作性要求
• 易于访问的网页的特征
  • 语义结构
  • 替代内容
  • 定义交互
• 可访问性标准
  • Web 内容可访问性指南1.0
  • Web 内容可访问性指南2.0
  • Section 508 法案
  • 其它标准
• 总结
• 练习题

在对网页的可访问性进行具体的讨论之前，我们先来概括地看一下可访问性——毕竟，可访问性并不仅仅只关系到网站；它与你生活中遇到的每一次服务，每一个对象或每一项技术都有潜在的关系。

注意，这里有个需要了解的相关话题 WAI ARIA ——由 Web 可访问性推动组织所提出的“可访问的富互联网应用倡议”，该提议本质上是一种方法论，用于指导创建具有更好可访问性的 Ajax/JavaScript 架构的应用程序。你可以在 dev.opera.com 上找到大量关于 ARIA 的介绍性文章。

什么是可访问性？

现在请你四下里看一看。如果顺利的话你应该能看到其他人；如果你身边一个人也没有，那干嘛不出去散散步呢？散步应该是很享受的事情，而且对你也有好处。你会发现周围的人没有一个是跟别人一模一样的——有人棕发，有人不是。有人碧眼，有人不是。有人戴眼镜，有人不戴。我们之中没有一个是跟其他人完全一样的。像头发和眼睛的颜色之类的差异只是装饰性的——它们并不会对我们的生活方式有太大的影响。但有的差异，比如戴眼镜，就会影响到我们了。可访问性是一件简单的事情，是一种宗旨，不过在有的国家，它也是法律的一部分。

可访问性就是对所有人一视同仁，无论他们是否有残障。

我知道这个声明可以作各种解释。大多数针对可访问性的讨论都会首先谈到残疾。这说明了残障人士应受到特殊待遇。但这并非可访问性真正的含义——事实上，它只提及可访问性的表象，只是说明了人们修建建筑、创建网站，以及进行几乎所有其他事情的传统做法。

如果你假定每个人都跟自己一样来进行设计，那么你所创建的东西将总是对某些人不合适。人们之所以认为可访问性是针对帮助残障人士而言的，是因为可访问性的改造在我们的社会中随处可见。比如说，许多建筑物开始的时候只有台阶，后来却突然修起了粗糙的斜面。然而，可访问性长期以来一直是军用设计的特色。这又是为什么呢？因为这对于生存来说常常是很关键的——在高负载的喷气式战斗机里，飞行员无法做到他们在地面上能做到的事。如果飞行器设计师没有将飞行员在高负载和低负载环境下的需求都纳入考虑范围的话，坠机事件可能就会多得多了。

那么，这对网站开发员来说意味着什么呢？简短地说，就是你必需认识到所有可能浏览你的网站的全体用户的需求。可能得等到你稍微了解了健康人群的不同层次，以及他们如何使用电脑之后，才能把这个问题更详细的答案告诉你。通过使用本教程和其它相关文献中列出的技术，你可以创建具有多种交互形式的网站。这样，无论人们属不属于下面的类型，你的网站对于他们来说也是可用的：

• 盲人或严重视觉障碍者，他们使用屏幕阅读器来听取网站，或者通过点字显示器来感知网页。
• 近视者，需要将字体大小放大到200%。
• 患有运动性残疾，因此无法用手操作鼠标，而用点击棒来操作键盘，或通过视线点击器来操作网站的人。
• 使用跟踪球，或其它不常见的计算机控制设备的人。

你不用对上述交互模式的特定细节感到担心——稍后我们将循序渐进地来研究这些东西。

为什么可访问性很重要？

之所以说可访问性很重要，除了有一个主要理由，还有一大堆次要理由。主要理由就是我们每个人都是不同的，同时我们都享有使用网站的平等权利，此外还有许多其它理由，是关于为何要将可访问性纳入创建网站时的考虑范围的：

• 在某些国家这是法律所规定的。
• 你不会希望有任何的潜在客户/访问者被排除在外而不能使用你的站点。
• 无障碍网站在搜索引擎上的排名会更高。
• 你展示着良好的道德风范——客户会重视这一点的。
• 如果你按照 web 标准来创建网站的话，你就几乎用不着再为网站可访问性付出额外的努力，而且这会带来许多好处；在提高网站的可访问性与使网站更适合于手机浏览器这二者之间，也有许多交叉点——尽管是出于不同的原因，这也是使得网站更不易访问的另一种情况。事实上，对于网站可访问性与手机互联网开发最佳实践之间的关系，已经进行了一些研究——更多信息请参见 WAI 的“Web 内容可访问性与手机互联网”页面。
• 有利于残障人士的技术同时也有益于所有用户。

下面我将更为详尽地对上述某些要点进行讨论。

可访问性的法律义务

注意：了解一些法律基础是很重要的，但在对法律问题发表意见时应当特别小心，除非你是个律师而且非常明白自己在说些什么。

在英国，根据 DDA 法案，在征兵、招聘，以及提供服务和教育时歧视残疾人是违法的。歧视的定义是指没有做出“适当的调整”来适应所有人，无论他们是不是残疾人。这个法案当然也适用于通过网络媒体提供可用的服务或教育。

美国和欧盟也有针对政府网站的要求。在美国，联邦政府（以及某些州政府）网站是必须要遵守 Section 508 法案的。Section 508 法案是一份公文，它规定了实现可访问性的最低要求。Section 508 法案并不仅仅只涵盖了网站；它也涉及到可能会被联邦雇员用到的所有其它技术。在欧洲，欧盟委员会已经认可了 W3C 的 web 可访问性提议（WAI），并将其推荐给各成员国使用。WAI 为网站、网页编写工具发行商以及 web 浏览器（例如，接下来我们将谈到的 WCAG）提供了指导方针。

潜在市场

如果你只针对某个特定人群开发网站（或是其它任何东西）的话，即使你没有意识到，实际上你已经把其他类型的人群排除在外了，而这些人群加起来很可能占据了相当可观的（即使不是大多数）市场份额。2000 年英国的超市连锁店 Tesco 上马了一个项目，即对他们的线上食品杂货网站进行改造，建立了特别针对视觉障碍人群的页面版本。据 RNIB 的 Julie Howell 说，“Tesco.com 开展的这项工作方便了盲人客户获得食品杂货送货上门的服务，并带来了超过每年 1300 万英镑的收益，如果他们的网站对盲人客户不可用的话，公司是不可能获得这笔收益的。”由此可见，如果 Tesco 公司没有考虑到视觉障碍人群的话，他们就会失去这个价值至少在 1300 万英镑以上的市场。

这件事的根本教训在于，无论残疾与否，人们都需要同样的服务；比如食品杂货，出租车，电力供应；而且享受同样的东西；比如电影，音乐，酒吧。认为某人因个人情况而改变了他参与到社会生活的方方面面中去的能力或愿望，这种主观臆断已经一次又一次地被证明是错误的。

搜索引擎

搜索引擎可不是人。人们在创建网站的时候，常常没有考虑自己的网站在 Google，Yahoo 等搜索引擎上是怎样被搜索到的。搜索引擎只是些计算机程序，它们只能用自己能理解的信息来给网站编制索引。这就使得它们同视觉障碍者使用的屏幕阅读器的情况非常相似。

图像是一个最好的例子，可以说明上述特性是如何影响到网页设计的。通过列出一张列表，写明各个像素点是什么颜色，并将该信息传输到显示器，计算机才能显示图像。如果你将一张含有文本的图片，比如一个标识，放在网页上，计算机并不理解这个文本的意思，它甚至连这个图片是否包含了文本都不知道。在 HTML 的图像元素中，有一种用文字来描述图片内容的方法，这就是 alt 属性。你应当为网站上所有的非装饰性图片提供文字描述信息，而且绝对不能将整段文字都用图片（或者 Flash）来展示——否则盲人和搜索引擎对这段文字将会一无所知！结果就是，你的搜索引擎排名（比如说，在 Google 之类的搜索引擎上查找你的网站的容易程度）就要遭殃了，而且你就会不必要地失去宝贵的市场。

道德规范与品牌

虽然说大家都应该支持可访问性，但这并不代表大家都是这么做的。在支持可访问性的同时，你也是在尽力为社会利益服务。你可以为此而骄傲——显示你对每个社会成员的关心，这只会提升你的品牌形象。从职业的方面来说，尽力提供最优质的产品也是我们应尽的职责。在这个重视个人的社会中，不能因为某人有不同的需求就将他排除在外，这一点是很重要的。

如果你在选择方针政策时尽心尽责，在发表方针贯彻声明时诚诚恳恳，你就可以树立起非常积极的品牌形象。比起其他公司来说，那些显示出自己关心客户的公司能够保持高得多的客户忠诚度。

做设计时要时刻牢记可访问性

实现可访问性的关键在于，无论是考虑问题还是解决问题，都要明白你所针对的是不止一种用户。如果你把可访问性看作是那种可以在最后才加以考虑的东西，那么你所做出来的将是一个生硬地捆绑在最后的东西。这将会花费你更多的时间，同时又根本不会奏效，而且还很难看。

为了实现设计良好的解决方案，最好的办法是从一开始就对所有的要求牢记于心。这并不是说你不能改变计划或者添补一些遗漏的东西，而是你应该认识到自己所要解决的整个问题是什么。对于网站来说，这意味着创建一个对所有用户都可用的解决方案，包括那些可能无法使用鼠标或键盘，或者显示器等设备的用户。

互操作性要求

互操作性要求很可能随情况不同而变化。

新技术常常在还不支持可访问性的时候就被采用了。比如说，微软最新的 Silverlight 插件就不能通过屏幕阅读器和其他辅助技术的可访问性应用程序接口来显示信息，尽管微软计划在将来实现这项支持。

即使是在理论上实现了可访问性支持，也需要一些时间来使它们得以运用在辅助技术上面。例如，较新的屏幕阅读器比起旧的版本来，能够更好地适应由 Javascript 触发的 HTML 结构更新。

即使是已经发布了很久的技术，其可访问性支持也可能因操作平台的不同而不同。比如说，Adobe Flash Player 插件很早就能将信息传递给 Windows 的可访问性应用程序接口了，但却不能在 Apple 或 GNOME 上同样地工作。

在支援技术的推出和其广泛应用之间也存在着滞后。浏览器和插件如今已倾向于免费，而主流的辅助技术却可能非常昂贵。比如说，现在最流行的屏幕阅读器之一是 Freedom Scientific 的 JAWS Windows 版。大体来说这个软件每年都会推出新版本。JAWS Professional 的零售价格是 1095 美元，而且即使你花了 200 美元购买了接下来的两个版本的软件维护协议，软件的升级也还要再花500美元以上。因此，尽管现在最新的版本是 version 9，也还是有许多的 JAWS 用户在使用旧版本。

因此当你针对公共网络建立网站时，你必须考虑到高度多样化的客户端用户/技术组合的互操作性。下面列出四种实现方法：

• 逐步强化你的网站功能，同时对支持性进行测试。
• 允许用户关闭有问题的增强功能。
• 提供相同内容或功能的替代版本。
• 就客户端需要支持的技术向你的客户提出建议，并举例说明哪些公司的产品支持这些技术。

在内联网中，就不必对向后兼容和多样性考虑那么多了。例如，一个特定的机构可能有能力保证所有的残疾员工都有办法获得辅助技术，而且该技术能够适当地支持 DHTML。在这种情况下，以及对所提供的辅助技术进行适当的测试后，就可以将 JavaScript 作为基础配置了。

然而，向前兼容和跨平台兼容仍然是个问题，因此，比起私有的非标准化技术来，应当优先选择开放的标准化技术。

举个例子，假设你在为某家大公司开发一个内联网上的培训应用程序。他们要求你确保该应用程序的可访问性，但没有指定你必须要遵守的标准。在与他们的 IT 部门沟通后得知，每个员工都有最新版本的 IE，并且 JavaScript 是启用的，Flash 也是安装并启用了的，而且也提供了针对这几方面所需的最新辅助技术。现在，就算是该公司换成了基于 Unix 的操作平台，也有相应的辅助技术来支持 JavaScript，但 Flash 文本和控件只有在 Windows 下才能用。这种情况下，你完全可以将脚本语言和 Flash 作为该应用程序的基础配置。但由于只有在 Windows 下辅助技术才能支持 Flash 控件，你决定只能将 Flash 用于播放视频，并按照 web 标准来创建 Flash 视频的控制集。这样，就算该公司换成了 Unix 系统，你的应用程序仍然是可用的。

由于一个组织的 IT 策略可能会改变，而使得 JavaScript 功能可用，以及开发插件的可访问性特征集的努力也可能会失败，因此即使你有技术基础，从核心层的 HTML 逐步强化你的网站也仍不失为一个好主意。

易于访问的网页的特征

在这一部分中，我将讨论网站的各种可访问性特征——也就是说，一个易于访问的网站应当包含哪些东西。我将对每一项进行详细说明。

语义结构

web 标准的基础之一就是对 HTML 中语义结构的使用。语义结构对于可访问性来说是非常重要的。这是因为它提供了页面信息的框架。如果人们无法看见网页的视窗界面，语义结构也能帮助他们获得大量的信息。语义结构可以提示他们在文件层级中所处的位置，还有他们可以如何与各种页面元素进行交互，以及在适当的地方对文本内容进行强调。

导航菜单可以作为一个好例子，用来说明一个文档的语义结构为何对其可访问性如此重要。一个结构良好的导航菜单应当是一系列项目的列表。你可以将导航菜单标记为 HTML 列表：

<ul>
  <li>Menu Item 1</li>
  <li>Menu Item 2</li>
  <li>Menu Item 3</li>

</ul>

通过将导航菜单构造为列表，就能很容易地让那些使用屏幕阅读器、同时无法看到列表的人知道这是个列表。因为他们的屏幕阅读器会告诉他们这是一张列表。如果你没有使用列表标记，屏幕阅读器就没办法知道这是列表，因此也就不能告诉使用者了。

在本教程之前的许多文章，主要是那些涉及 HTML 的文章中，你可以找到更多关于如何在 HTML 中使用正确的语义标记的资料。

替代内容

就如在搜索引擎一节中所说的，确保页面内容和导航菜单具有替代内容可用是非常重要的。文本可以作为页面内容的通用替代内容，但也有一种例外情况，这一点我们将在下面谈到。文本内容可以很方便地由屏幕阅读器朗读出来，也可以放大或缩小，还可以方便地改变其对比度，或者进行其他许多变形操作。由于对文本进行操作非常容易，我们应该为更多醒目的页面内容提供以文本为主的替代内容。现在有的媒体已经集成了文本存取通道，比如新版本的 Flash，其中的文本内容可以直接被读取，从而不必为整个媒体提供替代内容。

文本替代内容无法提供帮助的残障人群只有一种，那就是认知障碍患者。对认知障碍患者提供帮助的困难在于，在大多数情况下他们需要的是不同的内容，而不是不同媒体上的相同内容。但这并不意味着你就可以不用管他们了。简化网站上的语言和术语对大家都有好处。像浅显语言计划委员会之类的组织正在向那些原材料公司发起倡议，建议他们用“浅显的语言”来对自己的客户进行法律要求和条款声明之类重要信息的通知。他们制定了一部浅明英语词典，其中包括了一些术语，可以有助于用尽量简单的语言进行有效沟通。

怎样在你的网站上实施文本替换呢？第一步就是对非文本的内容进行识别。在 HTML 中有很多东西都不属于文本。最显而易见的非文本内容就是图像。下面的例子就是图片的一种可访问的使用方式：

<p>An interesting piece of art is Michelangelo’s “God creates Adam”

<img src="/images/adam.jpg" alt="A painting of a man reaching up to touch God’s hand
reaching down. It is cracked with age." longdesc="adam.html">.</p>

本例中的图片是页面内容的主要部分。这里 alt 属性包含了对该图片的简短描述，以便无法准确看到该图片的用户（或搜索引擎）使用。longdesc 属性负责链接到一个包含了对该图片更详细描述的 HTML 页面。一般而言，这种做法只用于描述那些作为页面主要内容的复杂图片。但这种方法也存在浏览器支持不良的问题。绝大多数时候你只会用到 alt 属性。

如果图片不是用在正文内容上，比如说只是用来作导航，或者纯粹只是起装饰作用的话，你可以不用像内容图片一样对其进行处理。用来增加按钮或页面导航条吸引力的图片应该对其 alt 属性进行定义，该属性值应与图片中的文本相同。alt 属性的功能是提供一条捷径，使计算机得以理解图片中包含的文本（进而通过屏幕阅读器读给用户听）。

对于那些装饰性的图片，或者是用来作追踪广告的图片，以及任何用户不会在意或与之进行交互的图片，你应当将其 alt 属性设为空。这并不是说直接省略掉这个属性，而是故意设置成这样：alt=""。之所以这么做，是因为现在有种智能型屏幕阅读器，这种阅读器是用来帮助使用者对付那些可访问性非常不好的网页的。如果某张图片没有 alt 属性，尤其是当这种图片是某个链接的一部分时，这种屏幕阅读器就会将图片的 URL 读给使用者听。如果这张图片的文件名是 add_to_cart.gif 之类的话，用户就可以使用 alt=""，这样屏幕阅读器就不会读出图片全部的URL，从而避免使用户感到郁闷。

并非所有形式的页面内容都像图片那么简单。比如 Flash（Flash 文件本身就可能是一整个网站）或影频之类更复杂的媒体文件就需要更复杂的描述。最新版本的 Flash 允许为 Flash 影片中的元素提供文本替代内容，就如同在 HTML 中一样。

定义交互

现在很多网站都涉及到除 HTML 之外的其他技术。如果使用不当，就算是像 CSS 一样的基础技术也可能会导致网页或交互的可访问性大打折扣。

注意，下面这个例子的目的是为了让你去仔细思考网页上各个部分的作用。为了确保这些部分的可访问性，它们所用到的 HTML 元素和视觉隐喻在语义上必须是正确的。如果你对这一点感到难以理解，可以把这个例子多读几遍，再多研究几个菜单和其他页面组成部分，同时想想看如果运用了适当的 HTML，以及如果该组成部分的外观和感觉就其功能而言有意义的话，结果又是怎样。别指望网页浏览者会用一个写着“输入你的邮箱地址，注册后方可浏览本资讯”的文本框来进行搜索，也别指望视觉正常的访问者能够发现什么感兴趣的内容，如果所有的标题都跟一般的文本一样的话（同样的，如果所有的“标题”都只是通过 CSS 或 font 元素做出更大的字体的话，你也别指望盲人用户能发现什么名堂）。

对这一点而言，普遍使用的标签视觉隐喻就是一个很好的例子。标签的隐喻源自那种可以按主题进行检索的活页夹。这种形式被用到了计算机上，在屏幕的某个特定区域以标签的形式显示出各种主题信息，每个标签都链接到相应主题的页面——在 dev.opera.com 上你就可以看到一个非常漂亮的标签示例——就在页面顶部。并且这种风格也相当直观。但问题就在于创建标签所需的技术——通常要通过 JavaScript 来实现标签的效果。

标签作为一种交互方式，一旦其功能超出"允许用户选择某项信息"，其原始隐喻就被打破了，但通常我们还是用同样的代码来描述标签。下面例子中的 HTML 代码说的就是一个用来显示信息的选项卡控件：

<div class="article_tabcontrol">
  <div class="article_hd">

    <ul>
      <li><a href="#dogs" class="article_selected">Dogs</a></li>
      <li><a href="#cats">Cats</a></li>

      <li><a href="#fish">Fish</a></li>
    </ul>
  </div>
  <div class="article_bd">
    <p id="dogs" class="article_selected">Some information about dogs. The dogs tab is the default tab.</p>

    <p id="cats">Some information about cats.</p>
    <p id="fish">Some information about fish.</p>
  </div>
</div>

本例中 selected 类用于指定哪个标签是“最前面的标签”，你可以去看看前面说的那个网页顶部的 “Articles” 标签，该标签用的就是这个方法。

这种结构对信息内容非常适用。在本例中，值为 selected 的 class 属性是用来表示哪个标签正处于活动状态的，比如说，处于打开的状态，并正在显示信息的那个标签；而其余的标签就处于关闭状态（比如，它们的文字段落被隐藏起来），直到其对应的链接被点开。在这里 dogs 的标签是默认的活动标签，如图 1 所示：

图 1：一个简单的标签控件，其默认的活动标签是 dogs。

一旦另一个链接被点开（如图 2 所示），就会激活 JavaScript，动态地将 class="article_selected" 属性移到那个链接去，然后对所对应的标签应用样式，使其得以显示，同时，之前显示的那个标签将被隐藏。

图 2：点开另一个链接，它对应的标签将被激活。

你可以在后面即将发布的关于 JavaScript 的章节中看到这种控件的实际使用例子。

让用户通过标签来选择各种类型的搜索方式，这样的做法也是很常见的。在本例中，如果你还是保持上个例子的代码风格的话，这个设计就会失败。

<div class="article_tabcontrol">
  <div class="article_hd">

    <ul>
      <li><a href="#dogs" class="article_selected">Dogs</a></li>
      <li><a href="#cats">Cats</a></li>

      <li><a href="#fish">Fish</a></li>
    </ul>
  </div>
  <div class="article_bd">
    <form id="dogs" class="article_selected" action="search.html" method="GET"><div><label for="dogsearch"><input type="text" name="dogsearch" id="dogsearch"><input type="submit" value="Search for Dogs"></div></form>

    <form id="cats" action="search.html" method="GET"><div><label for="catsearch"><input type="text" name="catsearch" id="catsearch"><input type="submit" value="Search for cats"></div></form>
    <form id="fish" action="search.html" method="GET"><div><label for="fishsearch"><input type="text" name="fishsearch" id="fishsearch"><input type="submit" value="Search for fish"></div></form>

  </div>
</div>

继续使用同样的代码结构已经没有意义了——在本例中，为了实现内容的更换，你一再地对同样的表单元素进行重复，这其实是在浪费标记。比起外观上的考虑来，关注交互本身更为重要。在本例中，你应该通过搜索表单来改变用户已有的交互，而不是通过选择新的信息来浏览标签。实际上，标签所应有的唯一用途就是用来选择用户正在搜索的动物类型。如果你使用这个办法，就可以创建一个对网站的所有用户都要好得多的交互，而且标记更为简洁，维护也更为容易。

<form action="search.html" method="GET">
  <fieldset>
    <legend>Search within:</legend>

      <ul>
        <li><label for="dogs">Dogs</label><input id="dogs" type="radio" name="animal" value="dog" checked></li>
        <li><label for="cats">Cats</label><input id="cats" type="radio" name="animal" value="cat"></li>

        <li><label for="fish">Fish</label><input id="fish" type="radio" name="animal" value="fish"></li>
      </ul>
    </fieldset>
  <input type="text" id="searchfield" name="search">

  <input type="submit" value="Search">
</form>

由于我们先创建了交互，标记变得更简洁了，该网站的所有用户也得到了最佳的用户体验。与前一个例子比较来看，如果我们先拓展视觉隐喻的话，我们就会立刻毁了这个交互，而且还会制造出一大堆标记来。如果我们是通过 AJAX 来插入页面内容，而不是直接将其写在页面上的话，情况就会更糟糕。那样的话，没有 JavaScript 的用户就只好加载一整个新页面，才能获得猫或者鱼的搜索表单。如果先考虑基本交互（而不是仅仅只加载视觉效果的部分）的话，你就可以简化这个问题。现在我们可以只用一个表单来进行所有的搜索，而同时仍然能保持标签隐喻（虽然这需要一点样式和脚本）。

这就是如何创建可访问的交互的精髓。HTML 最棒的地方之一就是：如何在 HTML 中创建易用的交互，这一问题最难的部分已经被解决了。只要你不在 HTML上 应用那些破坏隐喻的技术，你就可以轻松地做出适合大多数人群的东西。

可访问性标准

在这一部分中，我们将会回顾一些可利用的标准和原则，这些标准和原则是为了定义 web 可访问性，以及帮助 web 开发员创建可访问的网站。大多数的标准体系都包括检查表格系统，因此开发员可以检查网站对各种可访问性标准的一致性如何。

Web 内容可访问性指南1.0

W3C 是最早的网络标准机构之一。他们于 1999 年 5 月公布了第一版 web 可访问性倡议（WAI），该倡议是为了提高网站的可访问性。Web 内容可访问性原则（WCAG）是应用最为广泛的 web 可访问性标准。WCAG 1.0 得到了包括欧盟和意大利政府在内的许多政府机构的大力推荐，或是干脆强制执行。

WCAG 1.0 由 14 条准则构成，这些准则概括了一个可访问的页面所必需达到的标准。每条准则中都有若干检查点，这些检查点就是该文件的核心内容。准则是用来对那些存在于设计员心目中的概念进行定义，检查点则是用来检验网站对该标准的一致性。每个检查点都按照其优先级来排列，优先级有 3 个，从 1 到 3，说明了该检查点的重要程度。你必须做到所有优先级为 1 的检查点，这样才算是遵守了 WCAG 1.0。如果你做到了所有优先级为 1 的检查点，你的一致性等级就为 “A”，如果你同时还满足了所有优先级为 2 的检查点，你的等级就为 “AA”。如果你遵守了优先级为 1，2，3 的全部检查点，你的等级就是 “AAA”，这是最高的等级。

事实上 WCAG 1.0 已经有点过时了。许多公司选择从 “A” 或 “AA” 级标准开始，然后再增加其它一些准则，比如 RNIB 的 See it Right。WCAG 1.0 是一个很好的起点，但你需要更新的标准，尤其是当你应用了大量的 JavaScript，或者其它在 1999 年之后才成熟的技术的话。这是因为 WCAG 1.0 就是在 1999 年公布的。

关于 WCAG 1.0 另一件需要注意的事情是它是一套三个文件的一部分。另一个文件涵盖了“用户代理”方面的标准，用户代理是指浏览器（比如说 Opera）以及人们使用网络所需要的附加技术（比如屏幕阅读器）。第三个文件涵盖了 Dreamweaver 或内容管理系统之类的开发工具——该文件旨在让这些工具在提高网页可访问性方面承担更多的工作。可惜的是，这一部分并没有进行到底，三个文件中唯一被广泛使用的标准就是 WCAG 1.0。这意味着在用户代理方面，对 WCAG 1.0 的期望并没有得到满足，开发工具并没有帮你分担你肩上的确保网站可访问性的重担。当然这也不是说你就不要遵循 WCAG 1.0；只是说 WCAG 1.0 只满足了可访问性的一部分要求，它并不是一个完备的解决方案。

Web 内容可访问性指南2.0

WCAG 1.0 发布之后，W3C 又致力于 WCAG 2.0。这个升级版本的标准目前仍在编写之中。经过 W3C 的种种程序之后，该标准可能会在 2009 年初发布。

WCAG 2.0 跟 WCAG 1.0 比起来稍微有些不同，它的技术无关性要更强一些，比如，WCAG 2.0 可以被用在 HTML，CSS，Flash 等等上面。WCAG 2.0 基于四个可访问性原则，分别是：

可感知

人们可以通过适合自己的媒体来获知网页内容。比如应当让盲人得以收听页面内容。

可操作

人们可以与 web 应用程序或内容进行交互。

可理解

使用者可以弄懂页面内容和用户界面。

健壮性

所提供的一切服务都应当不受平台或操作系统的限制。这样就可以避免人们提供一些不太完善的服务，这些服务会因为硬件/软件的限制而导致大多数人都无法使用。

应该注意到，网站并不是必须满足全部这些要求。用户所使用的技术也应当承担起一部分工作。比如说一个屏幕阅读器应该将页面内容读给需要的人听，而不是让每个网站都提供一份音频版的内容。然而，为了实现这一点，网站应当确保其页面可以用一般的屏幕阅读技术读取。这种差别是很重要的，因为这是一个只具有“可访问性组件”（比如说一个可以放大字体的按钮）的网站与一个可以在许多不同情况下（比如不可预见的不同的浏览器和设备）运行的网页之间的差异。

WCAG 2.0 与 WCAG 1.0 之间的不同之处还在于它们对待技术的方式。由于该标准的技术无关性更强，针对的对象是可访问性的概念，而不是具体的技术细节，研究该标准的其它文件就显得很重要了。WCAG 2.0 的“标准”文档提供的是相关的协议，而“技巧”文档则为开发员提供可靠的可实施代码片段。这部分分成“一般”技巧（针对多种技术的）以及针对特定 W3C 技术的细节两个部分。W3C 没有为私有技术提供这种文件，因此你只能从其它来源寻找针对 Flash 和 Silverlight 之类技术的技巧。

Section 508 法案

Section 508 法案是对 1973 年颁布的美国劳工复健法的改进。Section 508 法案的一个版本是在 1998 年成为法律的，该版本的法案规定了在美国联邦政府采购过程中必须遵循的程序。这意味着所有由联邦拨款的美国政府机构都必须遵守 Section 508 法案中规定的程序和准则。这些准则涵盖了 web 可访问性和其它与计算机和电子通信技术有关的可访问性问题。不管你听到的说法是什么，联邦法律并没有强行规定那些不属于上述组织范围的机构也必须遵守 Section 508 法案。不过，美国的一些州和公司也采用了 Section 508 法案来对自己的采购过程中的“可访问性”进行界定。

Section 508 中涉及网页可访问性的部分是 Subpart B § 1194.22。第 1194.22 条法规分成 16 个要求，分别用以 a 到 p 的字母命名。前面 11 条要求（a 到 k）与 WCAG 1.0 中的部分内容等同。这些要求和它们在 WCAG 1.0 中的对应项列出在 section 508 法案文件的参考表中。除了一种情况以外，section 508 法案的其它要求将在 WCAG 2.0 中得到满足。要求 m 涉及到 section 508 法案的 Subpart B § 1194.21条款。该条款要求在 WCAG 2.0 的强壮性原则部分有个不完全相同的对应项。

在撰写本文的时候，有项关于新版 section 508 法案的调查正在进行之中，该调查是由电信，电气和信息技术咨询委员会（TEITAC）负责的。2008 年 4 月，TEITAC 将这项调查的结果呈交给 Section 508 法案的评估委员会。

其它标准

W3C 制定的另一个重要标准就是 WAI-ARIA 标准。WAI-ARIA 代表 web 可访问性倡议——可访问的富互联网应用。这是一套文件，定义了如何提高那些使用 HTML，JavaScript 和 AJAX 之类技术的复杂的 web 应用程序的可访问性。该标准获得了市场上即将推出/现行版本的大多数主流浏览器的官方支持：Opera 9.5，Internet Explorer 8 和 Firefox 3。

还有许多其它的 web 可访问性标准，因为太多了，在此无法一一赘述。不过 W3C 仍然是一个优秀的关于 web 可访问性的国际政策表——相对于查找你所在之地的政府的政策文件来说，这是一个很不错的资源。

总结

可访问性对于经济和社会来说都是一个重要话题。它并不是网站的特性，而是网站建设质量的一个衡量标准。如果你在创建网站的时候（以及开始创建前）顾及你的用户的话，你就能创建可访问性更好的网页，并且享受它所带来的一切好处。现在有许多著名的准则可以帮助你做到这一点——通过遵守这些准则，你就可以确保你所创建的网站在网页可访问性方面符合专业标准。

练习题

• 说出三个理由，为什么说建立可访问的网站很重要。
• 通过互联网来调查一下你所在国家关于可访问性的法规，列出你认为适用于你的网站的法规。如果他们要求你采用 WCAG 或 Section 508 法案之类的 web 标准的话，得确保你的网站包含了这些标准。
• 说明一下为什么对搜索引擎优化来说可访问性很重要。
• 用你自己的东西，比如照片，来创建一个范例，说明替代内容在提高网页的可访问性方面的作用。
• 通过互联网研究一下，你该怎样提高 Flash 或 Silverlight 之类技术的可访问性，并写出如何提高这些技术的可访问性与如何提高 HTML 的可访问性之间的区别。
• 说明一下你如何在某个网页上设计一个易于访问的交互。写出创建树形控件的操作步骤（你可以不必实际做出来）。

• < 上页
• 下页 >