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