米兰官方站网页版-米兰(中国)
首 页 APP开发 网(wǎng)站建设 微信开发 解决方案(àn) 公(gōng)司动态 联系(xì)我们
企业数字化的引领者 咨询服(fú)务热线:0371-63716361
泛(fàn)古动态
优化(huà)常识(shí)
常见问(wèn)题
建站知识
设(shè)计心得
WAP建站百科
手机建站行(háng)业资讯
首页轮播
首页轮(lún)播手机站
郑州(zhōu)网站建设
联系我们
常(cháng)见(jiàn)问(wèn)题
经典案(àn)例
利(lì)用CSS样式表改(gǎi)善网站(zhàn)可访问性(xìng)

最近,我不得不对我的一个客户的旧网站进行(háng)更新(xīn),使得(dé)它(tā)能够达到(dào)可访问(wèn)性的标准。对三四年前的旧代码(mǎ)进行挖掘的(de)想法(fǎ)根本没有(yǒu)吸引力(lì),主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问(wèn)性上来(lái)讲(jiǎng)。我(wǒ)曾(céng)经使用绝对(duì)的(de)字体大小(xiǎo),固定的页面宽(kuān)度和表(biǎo)格来做版面设计和空间分配。

像那时建构的(de)很(hěn)多网站一(yī)样,我的客户的(de)网站使(shǐ)用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何(hé)CSS的更加强(qiáng)有力的(de)版(bǎn)面(miàn)设计功能,也没有允许HTML设(shè)备独(dú)立,而这是CSS可访(fǎng)问性的主(zhǔ)要优点之(zhī)一。

问题是如(rú)何出现的?

在我概述使网站更加具有可访问性的方(fāng)法之前,了解现今众(zhòng)多的访问性问题的起因也许是很(hěn)有帮助(zhù)的:

对(duì)HTML肤(fū)浅的理(lǐ)解:在(zài)1990年(nián)代的互联网大(dà)发展时期(qī)中(zhōng),所(suǒ)有人都开始建构网站。WYSIWYG编辑(jí)器使得几乎每个人都可(kě)以很容(róng)易地(dì)建(jiàn)构一个网站,而不用费心去(qù)学习HTML。但不幸的是,这种在使用上(shàng)的便利带来了一些蹩脚的代码,对可访(fǎng)问性造成了(le)妨碍(ài)。

HTML在设计方面的局限性:开发者和设计(jì)者(zhě)经常会(huì)故意错用HTML标签,特别是标签,来克服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。

如有任何疑(yí)问请(qǐng)联系我(wǒ)们,我们7*24小时竭诚为您服务(wù)!
0371-63716361
郑州(zhōu)米兰官方站网页版和泛古(gǔ)软件 米兰官方站网页版-米兰(中国)

主营业(yè)务: 【APP开发】 【软件系统开发(fā)】 【移动(dòng)应用开(kāi)发(fā)】 【高端(duān)网站建(jiàn)设】 【网(wǎng)络营销】 【微信营销】 【微信系统开发(fā)】
业务咨询:0371-63716361 15638856138
公司(sī)地址:郑州 二七区 航海中路升龙城·二(èr)七中(zhōng)心A座(zuò)10楼1009-1010(航海路(lù)与兴华南街交叉(chā)口西北(běi)角)
郑州(zhōu)米兰官方站网页版和泛古软(ruǎn)件科技有限公司 版权(quán)所有 © 2009-2022 豫ICP备(bèi)14028268号  
留言反馈 | 了解米兰官方站网页版和泛古 | 联(lián)系米兰官方站网页版和泛古(gǔ) | 站点地图