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