您的位置: 首页 > 技术文档 > 网页制作 > 利用CSS改善网站可访问性
跟我学XSL(一) 回到列表 用js封装的时间设置器
 利用CSS改善网站可访问性

作者:builder.com 时间: 2004-03-17 文档类型:翻译 来自:builder.com

利用CSS改善网站可访问性

作者: BUILDER.COM
来源: www.BUILDER.COM
类型: 翻译

 最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲。我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配。  

像那时建构的很多网站一样,我的客户的网站使用了Cascading Style Sheets (CSS)来格式化文本。它没有使用任何CSS的更加强有力的版面设计功能,也没有允许HTML设备独立,而这是CSS可访问性的主要优点之一。

问题是如何出现的?

在我概述使网站更加具有可访问性的方法之前,了解现今众多的访问性问题的起因也许是很有帮助的:

对HTML肤浅的理解:在1990年代的互联网大发展时期中,所有人都开始建构网站。WYSIWYG编辑器使得几乎每个人都可以很容易地建构一个网站,而不用费心去学习HTML。但不幸的是,这种在使用上的便利带来了一些蹩脚的代码,对可访问性造成了妨碍。

HTML在设计方面的局限性:开发者和设计者经常会故意错用HTML标签,特别是<table>标签,来克服HTML在版面和设计上的局限性。这种设计方式也会带来妨碍可访问性的代码。

什么使得CSS更具有访问性?

CSS在1996年出现,用来解决上述的问题。通过使用CSS,你可以将一个HTML文件的内容与有关它的表现形式或风格的信息分离开来。这就使你可以应用准确的格式化并达到想要得到的版面设计,而无需使用可能会让屏幕阅读器和专门的浏览器软件产生困惑的HTML代码。

例如,虽然HTML表格是用来排列表格式数据的,但他们也经常被用来排列对齐一个页面上的元素的。但是阅读器和例如语音合成器的软件要求有效的HTML代码。因此当他们遇到一个页面错误地使用了诸如一个表格的元素,产生的结果就会让使用者感到莫名其妙。

CSS的另一个可访问性的优点就是它允许使用者定义他们自己的风格单,这个风格单可以与网站的风格单共同工作。因此,例如一个使用者可以设定,所有通过<p>标签定义的文本都应该是1.5em Arial,即使这个网站的风格单表示它应该是18px Verdana Bold。

要注意用户定义的风格只有在用户的风格名称与HTML页面中的标签相符时才会起作用,这是很重要的。这就将确保兼容性的责任交到了开发者的手中。例如,如果用户的风格单指定<p>标签应显示1.5em Arial文本,但是HTML页面并不使用<p>标签来从风格单中调用一个风格(也许它使用<font class=”bodytext”>),用户对于<p>标签定义的风格将会被忽略。因此要确保你对你的标题和段落使用标准的HTML标签,这将减少用户定义的风格单被忽略的机会。

开始

如果你是从头开始建构一个新的网站,那么通过CSS来改善可访问性就会很容易。但你仍然可以轻松地将现有的网站转变为CSS形式。

步骤1:检查现有代码

为了更好地说明,我将用在表A中这个简单的HTML代码来代表一个使用CSS的页面。这个例子假设页面还没有使用CSS,不过你也可以使用相似的方法来评价一个基于CSS的站点。主要的不同点就是大多数的改变将发生在CSS文件中而不是HTML文件中。

步骤2:从HTML中去掉所有特殊风格标签

要在这个页面中加入CSS,我首先需要去掉所有要控制内容表现的标签。样本代码使用了字体标签来定义字体外观,风格和颜色。去掉这些元素使得样本代码如表B所示。

步骤3:从HTML中去掉并替换任何错用的标签

现在我要去掉任何错用的HTML标签。在样本代码之中,一个表格用来在页面的内容创建一个15象素的边缘,代码还使用<br>标签来创建段落。

在我去掉表格和<br>标签之后,我将他们替换为适当的标签。例如,我对页面标题使用<h2>标签,用<p>标签来显示段落。使用这些标准HTML标签使得之后的CSS的应用变得非常容易,而且与用户定义的风格单更加兼容。现在的样本代码如表C所示。

步骤4:建构一个CSS文件来覆盖风格信息

现在我已经从HTML文件中去掉了所有风格信息,我需要将这些信息转移至一个CSS文件中。CSS文件仅仅是一个存为.css扩展名的文本文件,因此它可以在任何一个文本编辑器中进行创建。我使用的是Dreamweaver MX。

为了使在HTML中应用CSS文件变得容易,我使用了名为p和h2的风格来对应标准HTML标签。我使用了可变的字体大小,使得用户可以轻松地在浏览器中增大或缩小字体大小。使用绝对大小可以防止浏览器对字体进行大小的调整(除了Netscape 6或以后的版本之外,它将不考虑绝对字体大小)。我还在需要的地方指定了字体的种类,重量和颜色。

要重新产生由HTML标记代码创建的版面,我需要将<p>和<h2>标签设置宽度为780象素。然而,由于我们的目的是将可访问性最大化,因此我将去掉宽度设置使得页面能符合浏览器窗口的大小。而且我将让HTML页面使用浏览器的缺省边缘,而不是用原始代码的<table>标签来重新创建15象素的空白,这也使得其它例如打印机等的设备来使用它的缺省边缘设置。

表D显示了我创建的CSS文件。我将它命名为Mystylesheet.css并将它放置在网站根目录下的一个风格文件夹之中。

步骤5:在HTML文件上附加新的风格单

在创建了CSS文件之后,我在HTML文件中插入了它的风格。因为HTML文件已经包括了所有在CSS文件中引用的标签(<h2>和<p>),所以我只需要连接到HTML文件头部的风格单上就可以了。HTML文件从CSS文件中获得风格并将他们应用到<h2>和<p>标签当中,如表E所示。

步骤6:验证代码

整个过程的最后一个步骤就是验证HTML代码的可访问性。如果你对于CSS来说是个新手的话,你最好对CSS代码也进行验证。有很多种的工具都可以帮你对二者进行验证。

我使用Dreamweaver MX来检查我的样本代码的可访问性。你可以通过在文件菜单中选择Check Page然后选择Check Accessibility来实现。任何错误或是警告都会显示出来,还包括出现位置的行号以及对问题简要的解释。你可以在Dreamweaver MX的Reference工具中找到更多关于这些错误和警告的内容。你只要从Dreamweaver的Windows菜单中选择Reference然后从Book菜单中选择UsableNet Accessibility Reference就可以了。

此外,World Wide Web Consortium (W3C)提供了超过30个的可访问性评估工具的链接。W3C还提供了针对HTMLCSS的基于Web的免费验证器。

可访问性和简单的管理

虽然这里给出的例子是很简单的,但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且,对于CSS的使用不止这一个优点而已。

基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小,因为所有的风格信息都存储在了CSS文件之中。

因此如果你想要改善可访问性的话,将其视为一个机会,而不是一个障碍。要了解更多关于CSS和可访问性的内容,你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。

出处:builder.com
责任编辑:蓝色

◎进入论坛网页制作网站综合版块参加讨论

作者文章
利用CSS改善网站可访问性
Macromedia 的未来?
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2