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