标（biāo）签，来（lái）克（kè）服HTML在版面和设（shè）计上的局限性。这种设计方式也会带来妨（fáng）碍（ài）可访问性的代码（mǎ）。
什么使得CSS更（gèng）具有（yǒu）访问性？
CSS在1996年出现，用来解决上（shàng）述的问题。通过使用CSS，你（nǐ）可以将一（yī）个HTML文件的内容与有关（guān）它（tā）的（de）表现形式或风格的（de）信息分（fèn）离开来。这就使你可以应（yīng）用（yòng）准（zhǔn）确的格（gé）式（shì）化并达到想要得到（dào）的版面设计，而无需使用（yòng）可能会让屏幕阅读器和专（zhuān）门的浏览器软件产（chǎn）生困惑的HTML代码。
例如，虽（suī）然HTML表格是用来（lái）排列表（biǎo）格式数据的，但他们也（yě）经常被用来排列（liè）对（duì）齐一（yī）个页面上的（de）元素（sù）的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地（dì）使（shǐ）用（yòng）了诸如一个表格的元素，产生（shēng）的结（jié）果就会让使用（yòng）者感到莫名其妙。
CSS的另（lìng）一个可访问性（xìng）的优点就是它允许使（shǐ）用者定义他们自己的风格单，这个（gè）风（fēng）格单可以与网站的（de）风（fēng）格（gé）单共同工作。因此（cǐ），例如（rú）一（yī）个使用者可以设（shè）定，所有通过
标签定义（yì）的文（wén）本都应该是1.5em Arial，即使这个网站（zhàn）的风格（gé）单（dān）表示它应该是18px Verdana Bold。
要注意用户定义的风格只有（yǒu）在（zài）用（yòng）户的风格名称（chēng）与HTML页面中（zhōng）的（de）标签相（xiàng）符时才会起作用，这是很重要（yào）的。这就将确（què）保兼容性的责任交到了（le）开发者的手中（zhōng）。例如，如果用（yòng）户（hù）的风格（gé）单指（zhǐ）定标（biāo）签应（yīng）显示1.5em Arial文（wén）本，但是HTML页面并不使用
标签来从风格单中调用一个风（fēng）格（也许它（tā）使用），用（yòng）户对于标签（qiān）定义的风（fēng）格将会（huì）被忽略。因此要（yào）确保（bǎo）你对你的标题和段落（luò）使（shǐ）用标准（zhǔn）的（de）HTML标签，这将减少用户定义的风格单被（bèi）忽略的机会。
开始
如果你是从头开始建构（gòu）一（yī）个新（xīn）的网站，那么通过CSS来改（gǎi）善可（kě）访问性就会很容易。但你仍然可以轻松地将（jiāng）现有的网站转变为CSS形式。
步骤1：检（jiǎn）查现有代码
为了更好（hǎo）地说明，我将用在表（biǎo）A中（zhōng）这个简单的HTML代码来（lái）代（dài）表一个使用CSS的页面。这个例子假设页面还没有使用CSS，不过你（nǐ）也（yě）可以使用相（xiàng）似的方法来评价一个（gè）基于CSS的站点。主要的（de）不同点就是（shì）大多（duō）数的改变将（jiāng）发生（shēng）在CSS文件中而不是HTML文件中。
步骤2：从HTML中去掉所有特殊风格（gé）标签
要在（zài）这个（gè）页面中加入CSS，我首先需（xū）要（yào）去掉所有要控制内容表（biǎo）现的标（biāo）签。样本代码（mǎ）使（shǐ）用（yòng）了字体（tǐ）标签（qiān）来定义字体外观（guān），风格和颜色。去（qù）掉这些元素使（shǐ）得样本代码如（rú）表B所示。
步骤3：从（cóng）HTML中去掉并替换任何错（cuò）用的标签
现在我要去掉任何错用的HTML标签（qiān）。在样本代码之中（zhōng），一个表格用来在页面的内容（róng）创建一（yī）个15象素的边缘，代码还使用
标签来（lái）创建（jiàn）段落。
在我去掉表格和
标签之后，我将他们替换为（wéi）适当的（de）标签（qiān）。例如，我对页（yè）面标题使用
标签，用（yòng）
标签来显示段落。使用这（zhè）些标准HTML标签（qiān）使得之后（hòu）的CSS的应用变得非常容易，而且与用户定义的风格单更加（jiā）兼容。现在的样本代（dài）码如表C所示。
步（bù）骤4：建构（gòu）一（yī）个CSS文件来（lái）覆盖风格信息
现在（zài）我已经从HTML文件中去掉了所有（yǒu）风格信（xìn）息，我需要将这（zhè）些信息转（zhuǎn）移（yí）至一（yī）个CSS文（wén）件中（zhōng）。CSS文件仅（jǐn）仅是（shì）一个存为.css扩展名（míng）的文本文件，因（yīn）此它可以在任何一个文（wén）本编辑器中进行创建。我（wǒ）使用的是Dreamweaver MX。
为了使（shǐ）在HTML中应（yīng）用CSS文（wén）件变得容易，我使用了名为p和h2的风格来（lái）对应标准HTML标签。我使（shǐ）用了可变的字体（tǐ）大（dà）小，使得用户（hù）可以轻松地（dì）在浏览器中增大或（huò）缩（suō）小字（zì）体大（dà）小（xiǎo）。使用绝对大小可以（yǐ）防（fáng）止浏览器对（duì）字（zì）体（tǐ）进行大小的调整（除了（le）Netscape 6或以后的版本之外（wài），它将不考虑绝对（duì）字体大小）。我还在需要的地方指定（dìng）了字体的种类，重量和颜色（sè）。
要重新产生由（yóu）HTML标记代码创建（jiàn）的（de）版面，我（wǒ）需要将
和
标（biāo）签设置宽度为780象素。然（rán）而，由于（yú）我们的目的是将可访（fǎng）问性最（zuì）大化（huà），因此我将去掉宽（kuān）度设置使（shǐ）得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏（liú）览（lǎn）器的缺省边缘，而不是用原始代码的
标签来重新创建15象素的空白，这也使（shǐ）得其（qí）它（tā）例（lì）如打印机等（děng）的设备（bèi）来使用（yòng）它的缺省（shěng）边缘设（shè）置。
表（biǎo）D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根（gēn）目录（lù）下的一个风格文（wén）件夹之中。
步骤5：在HTML文件（jiàn）上附加新的风格单
在创建了CSS文（wén）件之（zhī）后，我在HTML文件中插入了（le）它的风格。因为HTML文件已（yǐ）经包括了所有在CSS文件中引用的标（biāo）签(和
)，所（suǒ）以我（wǒ）只（zhī）需要连接到HTML文（wén）件头（tóu）部的风（fēng）格单上就可以了。HTML文件从CSS文件中获得（dé）风格（gé）并将他（tā）们应用到
和
标签当中，如表E所（suǒ）示。
步（bù）骤6：验证（zhèng）代码
整个过程的最后一个步骤就（jiù）是验证HTML代码的可访问性。如果（guǒ）你（nǐ）对于CSS来说（shuō）是个新手的话，你（nǐ）最好对CSS代码也（yě）进行验证。有很多（duō）种的工具都可（kě）以帮你（nǐ）对二者进行验（yàn）证。
我使用（yòng）Dreamweaver MX来检查我的（de）样本代码（mǎ）的可访问性。你可以（yǐ）通过在（zài）文件菜单中选择Check Page然后（hòu）选择Check Accessibility来实现。任何（hé）错误或（huò）是警告都会显示出来，还包括出（chū）现（xiàn）位置的（de）行号以及对（duì）问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更（gèng）多关（guān）于（yú）这些错误和警告的内（nèi）容。你只要从Dreamweaver的Windows菜（cài）单中选择（zé）Reference然后（hòu）从Book菜单中选择UsableNet Accessibility Reference就可以（yǐ）了。
此外，World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还（hái）提（tí）供了针对HTML和CSS的基于Web的免费验证器。
可（kě）访问性（xìng）和简（jiǎn）单的管理
虽然这（zhè）里给出的例（lì）子（zǐ）是很简单的，但它（tā）说明了利用（yòng）CSS使你的（de）站点更加具有可访问性是非常容易的。而且，对于CSS的使用不止这一个优（yōu）点而已。
基于CSS的网站要比（bǐ）仅仅只（zhī）有HTML的网站（zhàn）要好管理（lǐ）得多。CSS文件中的（de）风格上的（de）变化可以应用到整个网站中而不需要改变网（wǎng）站中任何（hé）的HTML文件。而（ér）且（qiě）CSS的使（shǐ）用（yòng）缩小了每一个HTML文件的整体文件大小，因为所有的风格信息都存储在（zài）了CSS文件之中。
因此（cǐ）如果你想要改善可访问（wèn）性的话，将（jiāng）其视为一个机会，而不是（shì）一（yī）个障碍。要了（le）解更多关于CSS和可（kě）访问性的内（nèi）容，你（nǐ）可以去看一（yī）看World Wide Web Consortium中的Web Accessibility Initiative。
|
