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