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