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

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

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

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

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

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

什（shí）么使得CSS更（gèng）具有（yǒu）访问性（xìng）？

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

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

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

标签定义（yì）的（de）文本都应该（gāi）是1.5em Arial，即使（shǐ）这个（gè）网（wǎng）站的（de）风格单表示它（tā）应该是18px Verdana Bold。

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

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

标（biāo）签（qiān）来从风格（gé）单（dān）中调用一个风格（也许它（tā）使用（yòng）），用户对（duì）于

标签定义的风格（gé）将会被（bèi）忽略。因此要确保你对（duì）你的标（biāo）题和段落使用标准的（de）HTML标签，这将减少（shǎo）用户定义的风格单被（bèi）忽（hū）略的机会。

开（kāi）始

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

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

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

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

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

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

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

在我去掉表格和
标签之后，我将他（tā）们（men）替（tì）换为适当的标签。例如，我对页（yè）面标题使用

标签，用（yòng）

标签来显示段（duàn）落。使（shǐ）用这些（xiē）标准HTML标签使得之（zhī）后的（de）CSS的应（yīng）用变得非常容易，而且与用户定（dìng）义（yì）的（de）风格单更加兼容。现在（zài）的样本（běn）代码如表C所示。

步（bù）骤4：建（jiàn）构一个CSS文件来覆盖风格（gé）信（xìn）息

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

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

要重新产生由HTML标（biāo）记代（dài）码创建的（de）版面，我需要将

和

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

标签来重新创建15象素（sù）的（de）空白（bái），这也使得（dé）其它例如打印机等（děng）的设备来使用它的缺省边缘设置。

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

步骤5：在HTML文件上附加新的风（fēng）格（gé）单

在创建了（le）CSS文件之后，我（wǒ）在HTML文件中插入了它（tā）的风格。因（yīn）为HTML文件已经包括了所有在CSS文件（jiàn）中引（yǐn）用的标签(

和

)，所以（yǐ）我只需要连接到HTML文件头（tóu）部的风格单上（shàng）就可以了。HTML文件从（cóng）CSS文（wén）件中获（huò）得风（fēng）格（gé）并（bìng）将他们（men）应用到

和（hé）

标签当中，如（rú）表（biǎo）E所（suǒ）示。

步骤6：验证代码

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

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

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

可访问性和简单（dān）的（de）管（guǎn）理

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

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

因此如果你想要改善可访问性的（de）话，将其（qí）视为一个机（jī）会，而不（bú）是（shì）一个障碍。要了（le）解更多关于CSS和可访（fǎng）问性（xìng）的内容，你可以（yǐ）去看一（yī）看World Wide Web Consortium中的Web Accessibility Initiative。