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

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

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

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

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

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

什么（me）使得CSS更具有（yǒu）访（fǎng）问（wèn）性（xìng）？

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

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

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

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

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

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

标签（qiān）来从风格单（dān）中（zhōng）调用一个风格（也许它使用），用户对于

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

开始

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

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

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

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

要在这个页面中（zhōng）加入（rù）CSS，我首先需（xū）要去掉所有（yǒu）要控（kòng）制内容表（biǎo）现的标签。样本代码使用了（le）字体标签来定义字体外观，风格和（hé）颜色。去掉这些元（yuán）素使得样本代码如表B所示。

步骤（zhòu）3：从（cóng）HTML中（zhōng）去掉并替换任何错用的标（biāo）签（qiān）

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

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

标签，用

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

步骤（zhòu）4：建构一个CSS文（wén）件来覆盖风格信（xìn）息（xī）

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

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

要（yào）重新产生由HTML标记代（dài）码创（chuàng）建的版面，我需（xū）要将（jiāng）

和

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

标（biāo）签来重新（xīn）创建15象素的空白，这也（yě）使得（dé）其它例如打印机等的设备来（lái）使用它的缺省（shěng）边（biān）缘设置。

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

步（bù）骤5：在HTML文件（jiàn）上附加（jiā）新的风格单

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

和

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

和

标签当中，如表E所示。

步骤6：验证（zhèng）代码

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

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

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

可访问性和简单的（de）管理

虽然这里给出的例子是很（hěn）简单的（de），但（dàn）它说（shuō）明了利用CSS使（shǐ）你（nǐ）的站点更加（jiā）具有可访问（wèn）性是（shì）非常（cháng）容（róng）易的。而（ér）且，对于CSS的使用不止这一个（gè）优点而已。

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

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