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