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