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