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

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

问题是如何出现的？

在我（wǒ）概述使网（wǎng）站更加具有（yǒu）可访问（wèn）性的方（fāng）法之前，了解现今众多（duō）的访（fǎng）问性问题的起因也许是很有帮助的：

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

HTML在设计方面的局限性（xìng）：开发者和（hé）设计者经常（cháng）会故（gù）意错用HTML标（biāo）签，特别是标签，来克服HTML在版（bǎn）面和设（shè）计上的局限性。这种设（shè）计方式也会带来妨碍（ài）可访问（wèn）性的代码（mǎ）。

什么（me）使得（dé）CSS更具（jù）有访问性？

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

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

CSS的另一（yī）个可（kě）访问性的优（yōu）点就（jiù）是它允许使用者定义（yì）他们自己的风格（gé）单，这个风格单可（kě）以与网（wǎng）站的风格（gé）单共同工作。因此，例如（rú）一个使用者可（kě）以设定，所有通过

标签定义的文本都应该是（shì）1.5em Arial，即（jí）使（shǐ）这（zhè）个网站（zhàn）的风（fēng）格单表示它应（yīng）该是18px Verdana Bold。

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

标签应显示1.5em Arial文本，但是HTML页面并不使用

标签（qiān）来从风格单中调用一个风格（也许（xǔ）它使用），用（yòng）户对于

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

开（kāi）始

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

步骤1：检查现有代码

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

步骤2：从HTML中去掉所有（yǒu）特殊（shū）风格标签

要（yào）在这（zhè）个页面中加入CSS，我首先（xiān）需要去掉（diào）所有要控制内容表（biǎo）现的（de）标签。样本（běn）代码使用了字体标签（qiān）来定义字体（tǐ）外观，风格和颜色。去掉这些元（yuán）素（sù）使得样本代码如（rú）表B所示（shì）。

步骤3：从HTML中去（qù）掉并替（tì）换任何错用的标签

现在我（wǒ）要去掉（diào）任何错用的HTML标签（qiān）。在样本（běn）代码（mǎ）之中，一（yī）个表格用来（lái）在页面的内容创建一个（gè）15象（xiàng）素的（de）边缘，代码（mǎ）还（hái）使用（yòng）
标签（qiān）来创建段落。

在我去掉表格（gé）和
标签之后，我将他们替换为适当的标签。例如，我对页面（miàn）标题使用

标（biāo）签，用

标签来（lái）显示段落。使用这（zhè）些标准HTML标签使得之后（hòu）的CSS的应用变得非常容易，而且与用户定义（yì）的风格单更加兼容。现在的样本代码如表C所示。

步骤（zhòu）4：建构一个CSS文件来（lái）覆（fù）盖风格信（xìn）息

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

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

要（yào）重新产生（shēng）由HTML标记（jì）代码（mǎ）创建的版面，我需要（yào）将

和（hé）

标签设置宽（kuān）度为780象素。然而，由（yóu）于我们（men）的目的是（shì）将可访问性最大（dà）化（huà），因此我将去掉宽度设置使得（dé）页面能符合浏览器（qì）窗口的大小（xiǎo）。而且我将让HTML页面使用浏（liú）览器的缺省边缘，而不是（shì）用原（yuán）始代码的

标签来重新创（chuàng）建15象（xiàng）素的空白，这也（yě）使得其它例如（rú）打印机等（děng）的设备来使（shǐ）用它的缺省边缘设（shè）置。

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

步骤5：在（zài）HTML文件上附加新的（de）风格单（dān）

在创建了CSS文（wén）件之后，我（wǒ）在HTML文件（jiàn）中（zhōng）插入（rù）了它的（de）风格。因为（wéi）HTML文（wén）件（jiàn）已经（jīng）包括（kuò）了所有在CSS文件中（zhōng）引（yǐn）用（yòng）的标签(

和

)，所（suǒ）以我只需要连接（jiē）到（dào）HTML文件（jiàn）头（tóu）部的风格单上就（jiù）可以了。HTML文（wén）件从（cóng）CSS文件中获（huò）得风（fēng）格并将他们应用到（dào）

和

标签当中，如（rú）表E所示。

步骤6：验证代码

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

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

此外，World Wide Web Consortium (W3C)提供了超（chāo）过30个的可访问性评估工（gōng）具的链接。W3C还提供了针对HTML和CSS的基于Web的免费验证（zhèng）器（qì）。

可访（fǎng）问性和简单的管理（lǐ）

虽（suī）然这里给出的例子是很简单的，但它说明了利用CSS使你的站点更加（jiā）具有可（kě）访问（wèn）性是非（fēi）常容易的。而且，对于CSS的使用不止这（zhè）一个优点而（ér）已。

基（jī）于（yú）CSS的网站要比（bǐ）仅仅只有HTML的网站要好管（guǎn）理得多（duō）。CSS文件中的风格上的变化可以应用（yòng）到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的（de）使用（yòng）缩（suō）小了每一（yī）个HTML文件的整（zhěng）体文件大小，因为所（suǒ）有的风（fēng）格信息都存（cún）储在了CSS文件之中。

因此如果你想（xiǎng）要改善可（kě）访问（wèn）性的话，将（jiāng）其视为一（yī）个机会，而（ér）不是一个障碍。要了解更多关于CSS和可访问性的（de）内容，你可以（yǐ）去（qù）看一看World Wide Web Consortium中的Web Accessibility Initiative。