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