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

像那时建构（gòu）的（de）很多网站一样，我的客（kè）户的网站使用了Cascading Style Sheets (CSS)来格（gé）式（shì）化文本。它没（méi）有使用任何CSS的更加（jiā）强有（yǒu）力（lì）的版面设计功能（néng），也没（méi）有允许HTML设备独（dú）立（lì），而这是CSS可访问（wèn）性的主要优点（diǎn）之一。

问题是如（rú）何出现的？

在我（wǒ）概述使网站更加具有可访问性的方法之前，了解（jiě）现今众多的（de）访问性问题的起（qǐ）因也（yě）许是很有帮助的：

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

HTML在（zài）设计方面的（de）局限性：开发（fā）者和设（shè）计者（zhě）经常（cháng）会故意（yì）错（cuò）用HTML标签，特别是标（biāo）签，来克服HTML在版面和设计（jì）上的（de）局限性（xìng）。这（zhè）种设计方式也会带来妨碍可访问性的（de）代码。

什么使得CSS更具有访问（wèn）性？

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

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

CSS的另一（yī）个（gè）可访问性的（de）优点就是它允许使（shǐ）用者定（dìng）义（yì）他（tā）们自（zì）己（jǐ）的（de）风格单，这个（gè）风格单可以与网站的风格（gé）单（dān）共同工作。因此，例如（rú）一个使用（yòng）者可以（yǐ）设（shè）定（dìng），所有通（tōng）过

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

要注意用户（hù）定义的风格只有在用户的风格名称与HTML页面中（zhōng）的标签相符时才会起作用（yòng），这是（shì）很（hěn）重要的。这就（jiù）将确（què）保兼（jiān）容性的责任交到了开发者的手中。例（lì）如，如果用户的风格单指定（dìng）

标签（qiān）应显示1.5em Arial文本（běn），但是HTML页（yè）面并（bìng）不使用

标签来（lái）从（cóng）风格单中调用一（yī）个风（fēng）格（也许它使用），用户（hù）对（duì）于

标签定义的风格将会被忽略。因此（cǐ）要确保你对你的标题和段落使（shǐ）用标准的HTML标签，这（zhè）将减少用（yòng）户（hù）定义的（de）风格单被忽略的机会。

开始（shǐ）

如果你是（shì）从头开始建构一个新的（de）网（wǎng）站，那么通过CSS来改善可（kě）访问（wèn）性就会很容易。但你仍然（rán）可以（yǐ）轻（qīng）松地将现有（yǒu）的网站转变为CSS形式。

步骤（zhòu）1：检查现有代码

为了更好地说明，我将用在表A中这个简单（dān）的（de）HTML代码来代表一个（gè）使用CSS的（de）页（yè）面（miàn）。这个例子假设页面还没有使用（yòng）CSS，不过你也可以使用相似（sì）的（de）方法（fǎ）来（lái）评价一（yī）个基于CSS的站点。主（zhǔ）要的不同点就是大多数的改变（biàn）将（jiāng）发生（shēng）在CSS文（wén）件中而不是HTML文件中。

步骤2：从HTML中去（qù）掉所有特殊风格标签

要（yào）在（zài）这（zhè）个页面中加入CSS，我首（shǒu）先（xiān）需要去（qù）掉（diào）所有要（yào）控制内（nèi）容表现的标签。样本代码使用了字体标签来定义字体外观，风（fēng）格（gé）和颜（yán）色。去掉这些元素使（shǐ）得样本代码如表B所示。

步骤3：从HTML中去掉（diào）并替换任何错（cuò）用的（de）标（biāo）签

现在（zài）我（wǒ）要去掉任何（hé）错用的HTML标签。在（zài）样本（běn）代码（mǎ）之中，一个表格用来在（zài）页面（miàn）的内（nèi）容（róng）创建一个15象素（sù）的边缘，代码还使（shǐ）用
标签来创（chuàng）建段落。

在我去掉（diào）表（biǎo）格和
标签之后，我将他们替换为适当的标签。例（lì）如，我（wǒ）对页面标题使用（yòng）

标签，用

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

步骤4：建（jiàn）构一个CSS文件（jiàn）来覆盖风格信息

现在我已经从HTML文件中去掉了（le）所有风（fēng）格信息，我需要将这些信息转移至一个CSS文件中。CSS文件（jiàn）仅仅是一个存为.css扩（kuò）展名的文本文件，因此（cǐ）它可以（yǐ）在任何一个文本编辑器中进行创建。我使用的（de）是Dreamweaver MX。

为了使在HTML中应用CSS文件变得容易，我使用了名为p和h2的（de）风（fēng）格来（lái）对应标准HTML标签。我使用（yòng）了可变的字体大小，使得用户可以轻松地在浏览器（qì）中（zhōng）增大或缩（suō）小字体大小。使用绝（jué）对大小可以防止浏览器对字（zì）体进行大小的调整（除了Netscape 6或以后（hòu）的版本（běn）之外，它（tā）将不考（kǎo）虑（lǜ）绝对字体大小）。我还在需要（yào）的地方指定了字（zì）体的种（zhǒng）类，重量和颜色（sè）。

要重新产生由HTML标记代码（mǎ）创建的（de）版面（miàn），我需要将

和

标签设（shè）置宽（kuān）度为780象素（sù）。然而，由（yóu）于（yú）我们（men）的目的是将可访问性最（zuì）大（dà）化（huà），因此我（wǒ）将去掉宽度（dù）设置（zhì）使得页面能符合（hé）浏览器窗（chuāng）口的大小。而且（qiě）我将让HTML页面使（shǐ）用（yòng）浏览器的缺省边缘（yuán），而不（bú）是用原始（shǐ）代码的

标签（qiān）来重新创建15象素（sù）的（de）空白（bái），这也使（shǐ）得其（qí）它例如打印机等的设（shè）备来使用它的缺省边缘设置。

表D显示了我创建（jiàn）的CSS文件。我将它（tā）命（mìng）名为Mystylesheet.css并将它放（fàng）置在（zài）网站根目（mù）录（lù）下（xià）的一个风格文件夹之（zhī）中。

步骤5：在HTML文（wén）件上（shàng）附（fù）加新的风格（gé）单

在创建（jiàn）了CSS文件之后（hòu），我在HTML文件（jiàn）中插入了它的风格。因（yīn）为（wéi）HTML文件（jiàn）已经包括了所有在CSS文件中引（yǐn）用的（de）标（biāo）签(

和

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

和

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

步（bù）骤6：验证代（dài）码

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

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

此（cǐ）外（wài），World Wide Web Consortium (W3C)提供（gòng）了（le）超（chāo）过（guò）30个（gè）的可访问性评估（gū）工具的链接。W3C还（hái）提供了针对HTML和CSS的基于Web的免（miǎn）费验证器。

可访（fǎng）问性和（hé）简单的管理

虽然这里给出（chū）的例子是很简（jiǎn）单的，但它说明了（le）利（lì）用CSS使你的（de）站点（diǎn）更（gèng）加具（jù）有可访（fǎng）问性（xìng）是非常容易（yì）的。而且（qiě），对（duì）于CSS的（de）使用不止这一个优点而已（yǐ）。

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

因此如果你想要改善可访问（wèn）性的话，将其（qí）视为一个机（jī）会，而不是一个（gè）障（zhàng）碍（ài）。要了解（jiě）更多关于（yú）CSS和可访问性的内容（róng），你可以去看一（yī）看World Wide Web Consortium中（zhōng）的Web Accessibility Initiative。