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