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