最近，我不（bú）得不对我的一（yī）个客户的旧（jiù）网（wǎng）站进行（háng）更新，使（shǐ）得它能够（gòu）达到可访问（wèn）性的标准。对三四年前的旧代码进行（háng）挖掘的想法（fǎ）根本没（méi）有吸引力，主（zhǔ）要是因为我曾（céng）经使用（yòng）的很多编程惯（guàn）例已经不再适（shì）用（yòng），特别是从可访（fǎng）问性上来（lái）讲（jiǎng）。我曾经使用绝（jué）对（duì）的字体（tǐ）大小，固定（dìng）的页面（miàn）宽（kuān）度（dù）和表格来做版面设（shè）计（jì）和空间（jiān）分配。

像（xiàng）那时（shí）建构的很多网站（zhàn）一样，我的客户的网（wǎng）站使用了（le）Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加（jiā）强有力的版面（miàn）设计功能，也没有允（yǔn）许HTML设（shè）备独立，而这（zhè）是CSS可访问性的（de）主要（yào）优点之一。

问（wèn）题是如（rú）何出现（xiàn）的？

在我概（gài）述使网站更加具有可访问性的方法之前，了（le）解现今众多的访问（wèn）性问题的起因（yīn）也许是很有帮助的：

对HTML肤浅的理解：在（zài）1990年（nián）代的互联网大发展（zhǎn）时（shí）期中（zhōng），所有人都开始建（jiàn）构网站（zhàn）。WYSIWYG编辑器使得几（jǐ）乎每（měi）个人都可以很容易地建（jiàn）构一个（gè）网（wǎng）站（zhàn），而不（bú）用费心去学习HTML。但不幸（xìng）的是，这（zhè）种在使用上的便利带来了一（yī）些蹩（bié）脚的（de）代码，对可（kě）访（fǎng）问性（xìng）造成了妨碍。

HTML在设计方面的（de）局限性（xìng）：开发者和设计（jì）者经常会故意错用HTML标签，特别是标签，来克服HTML在版面和设计上的局限性。这种设计方式（shì）也会带来妨碍可访（fǎng）问性的代码。

什么使得CSS更（gèng）具有访问性？

CSS在1996年出现，用来解决（jué）上述的问题。通过使用CSS，你可以将一个（gè）HTML文件（jiàn）的内（nèi）容与有关它的表（biǎo）现形式或风格（gé）的信息分离开来。这就使你可以应（yīng）用（yòng）准确的格（gé）式化并达到想要得到的版（bǎn）面设计，而无需使（shǐ）用可（kě）能会让屏幕阅读（dú）器和（hé）专门的（de）浏览器软（ruǎn）件产生困惑（huò）的HTML代码。

例如，虽然（rán）HTML表格是（shì）用（yòng）来排列表（biǎo）格式数据的（de），但他们（men）也经常被用来排列对齐（qí）一（yī）个（gè）页面（miàn）上的元（yuán）素的（de）。但是阅（yuè）读（dú）器（qì）和例如语音合成（chéng）器的软件要求有效的HTML代码。因此当（dāng）他（tā）们遇（yù）到（dào）一个页面（miàn）错误地使（shǐ）用了诸如（rú）一个表格的元素，产生的（de）结果（guǒ）就会让（ràng）使用者感到莫名其妙。

CSS的另一个可访（fǎng）问性的优点就是（shì）它允（yǔn）许使用者定义他们自（zì）己的风格（gé）单，这个风格（gé）单可以与（yǔ）网站的风格单共同（tóng）工作。因此，例如一个使用者可以设定，所有通过

标（biāo）签定义的文（wén）本都应该是1.5em Arial，即使这个网站的风格单表示它应该是18px Verdana Bold。

要注意用（yòng）户定义的风格只有在（zài）用（yòng）户的风（fēng）格名称与HTML页面中的（de）标签相符时才会起（qǐ）作（zuò）用（yòng），这是很重要的。这（zhè）就将确保（bǎo）兼容（róng）性的责任交（jiāo）到了开发者（zhě）的手中。例如，如果用户的风格单指定（dìng）

标签应显（xiǎn）示（shì）1.5em Arial文本，但（dàn）是HTML页面（miàn）并不（bú）使用

标签来从风格单中调用一个风格（也许它使用），用户（hù）对于

标签（qiān）定义（yì）的风格将（jiāng）会被忽略。因此要确保你对（duì）你的标题和段落使用标准的（de）HTML标签，这（zhè）将减少（shǎo）用户定（dìng）义的风（fēng）格单被（bèi）忽略的机会。

开始（shǐ）

如果你是从头开始（shǐ）建构一个新的网站，那么通过CSS来改善可访问性就（jiù）会很容易。但你仍（réng）然（rán）可以轻松地将（jiāng）现有的（de）网站（zhàn）转变为CSS形（xíng）式。

步骤1：检（jiǎn）查现有代码

为了更好（hǎo）地说明，我将（jiāng）用在表A中这个简单的HTML代码（mǎ）来（lái）代表一个使用CSS的页面。这个例子假设（shè）页面还没有使用CSS，不过你（nǐ）也可以使（shǐ）用相（xiàng）似的方（fāng）法来评价一个基于CSS的站点。主要的不同点就（jiù）是（shì）大多（duō）数的改（gǎi）变将发生（shēng）在CSS文件中而不（bú）是HTML文件中。

步骤2：从HTML中去掉所有特殊风格标（biāo）签

要在这个页面（miàn）中加入CSS，我首（shǒu）先需（xū）要去掉（diào）所有（yǒu）要控制内容表现的标（biāo）签。样本代码使用了字体标签来定义字体（tǐ）外观，风格和颜色。去掉这些元素使得样本（běn）代码如表B所示。

步骤（zhòu）3：从HTML中去掉（diào）并替（tì）换（huàn）任何错用（yòng）的标签

现在我要去掉任（rèn）何错用的HTML标（biāo）签。在样本代码之（zhī）中（zhōng），一（yī）个表格用来在页面的内（nèi）容（róng）创建（jiàn）一个15象素的边缘，代码还使用
标签（qiān）来创建段落。

在我去掉表格和
标签之后，我将他们替（tì）换（huàn）为（wéi）适当的标签（qiān）。例如，我对页面标题使用

标签，用

标签来显示（shì）段落。使用这些标准HTML标签使得之后的CSS的应用变得非（fēi）常容易（yì），而且与用（yòng）户定（dìng）义的风格单（dān）更加兼容（róng）。现在的样本（běn）代码如表（biǎo）C所示。

步骤4：建构一个CSS文件来（lái）覆盖风格信息

现在我已（yǐ）经从（cóng）HTML文件中（zhōng）去掉了所有风格信息，我需要将（jiāng）这些信息转移至一个（gè）CSS文件中。CSS文件（jiàn）仅仅是（shì）一个存（cún）为.css扩展（zhǎn）名（míng）的文本文件，因此它可以（yǐ）在任何一（yī）个文本编辑（jí）器中进行（háng）创（chuàng）建（jiàn）。我（wǒ）使用（yòng）的是（shì）Dreamweaver MX。

为了使在HTML中（zhōng）应用CSS文（wén）件变得容易，我（wǒ）使用了名为p和h2的风格来对应标准（zhǔn）HTML标签。我使用了（le）可变的字体大小，使得用户可以轻松地在浏览器中增大或缩（suō）小字体大小（xiǎo）。使用绝对大小可以防止浏（liú）览器对字体进行大小的调整（除了Netscape 6或以后的版本之外，它将（jiāng）不考虑绝对（duì）字体大小）。我还在需要的地方指定了字体的种（zhǒng）类（lèi），重量和颜色。

要重新产生由HTML标记（jì）代码创建的版面，我（wǒ）需要（yào）将

和

标签（qiān）设置（zhì）宽度（dù）为780象素。然而，由于（yú）我们的目的是（shì）将可（kě）访问性最大化（huà），因（yīn）此我将去（qù）掉（diào）宽度设置使得（dé）页面能符合浏（liú）览器窗（chuāng）口的大小。而且（qiě）我将（jiāng）让HTML页面使（shǐ）用浏览器的缺省边缘，而不是用原始（shǐ）代码的

标签（qiān）来重新创建15象素的空白，这也（yě）使（shǐ）得其它例如打印机等的设备来使（shǐ）用它的缺省边缘设置。

表D显示了我创建（jiàn）的CSS文件。我将它命名为Mystylesheet.css并将它放置（zhì）在网（wǎng）站（zhàn）根目录下的一个风格文件夹之中。

步骤5：在HTML文件（jiàn）上（shàng）附加新的风（fēng）格单

在创建了CSS文件之后，我在HTML文（wén）件中（zhōng）插入（rù）了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(

和

)，所以我只需要连接到HTML文（wén）件头部的风（fēng）格单上就可以（yǐ）了（le）。HTML文件从CSS文（wén）件中获得（dé）风格并将他们应用到

和（hé）

标（biāo）签当中（zhōng），如表E所示。

步骤6：验证代码（mǎ）

整个（gè）过程的（de）最后一（yī）个步骤就是验证HTML代（dài）码的（de）可（kě）访问性。如果你对于（yú）CSS来说是个新（xīn）手的（de）话，你最好对CSS代码也进行验（yàn）证。有很多种的工具都可以帮你（nǐ）对（duì）二者进行验证。

我使（shǐ）用Dreamweaver MX来检查我的（de）样本代码的（de）可访（fǎng）问性（xìng）。你可以通过（guò）在文件菜单中（zhōng）选择Check Page然后（hòu）选择Check Accessibility来实现。任何错误（wù）或是警告（gào）都会（huì）显示出来，还包括出现位（wèi）置（zhì）的行号（hào）以及对（duì）问题简要（yào）的（de）解释。你可（kě）以在Dreamweaver MX的（de）Reference工具中找到更（gèng）多（duō）关于这（zhè）些错误和警告（gào）的内（nèi）容。你（nǐ）只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜（cài）单中选择UsableNet Accessibility Reference就可以了。

此外，World Wide Web Consortium (W3C)提（tí）供了超过30个的可访（fǎng）问性评估工具的链接。W3C还提供了针对HTML和CSS的基于（yú）Web的（de）免费（fèi）验证器（qì）。

可访问性和简（jiǎn）单的管理

虽然（rán）这里给出的例子是很简单（dān）的，但（dàn）它说明了利用CSS使你的（de）站点更加（jiā）具（jù）有可访问性是非常容易（yì）的（de）。而且，对（duì）于CSS的使用不止（zhǐ）这（zhè）一（yī）个（gè）优点而已。

基于CSS的（de）网站（zhàn）要比仅仅只有（yǒu）HTML的网（wǎng）站要好管理（lǐ）得多。CSS文件中（zhōng）的风格上的变化可以应用到整个网站中而（ér）不需（xū）要改变网站中任何的HTML文件。而且CSS的使（shǐ）用缩小（xiǎo）了每（měi）一个HTML文件的整体文件（jiàn）大小，因（yīn）为所有的风格信息（xī）都存储（chǔ）在了CSS文件之中（zhōng）。

因此（cǐ）如果你想要（yào）改善可访问性的话，将其视为一个机（jī）会，而不是一个障碍。要（yào）了（le）解更多（duō）关于CSS和可访问性（xìng）的内容（róng），你可（kě）以去看一看World Wide Web Consortium中的（de）Web Accessibility Initiative。