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