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