利用CSS改善网站可访问性
作者:佚名 发布时间:2010-10-20 20:12:00
最近,我不得不对我的一个客户的旧网站进行更新,使得它能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力,主要是因为我曾经使用的很多编程惯例已经不再适用,特别是从可访问性上来讲。我曾经使用绝对的字体大小,固定的页面宽度和表格来做版面设计和空间分配。
像那时建构的很多网站一样,我的客户的网站使用了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还提供了针对HTML和CSS的基于Web的免费验证器。
可访问性和简单的管理
虽然这里给出的例子是很简单的,但它说明了利用CSS使你的站点更加具有可访问性是非常容易的。而且,对于CSS的使用不止这一个优点而已。
基于CSS的网站要比仅仅只有HTML的网站要好管理得多。CSS文件中的风格上的变化可以应用到整个网站中而不需要改变网站中任何的HTML文件。而且CSS的使用缩小了每一个HTML文件的整体文件大小,因为所有的风格信息都存储在了CSS文件之中。
因此如果你想要改善可访问性的话,将其视为一个机会,而不是一个障碍。要了解更多关于CSS和可访问性的内容,你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative
猜你喜欢
- 如何制作一个股票滚屏显示面板?<html> <head> <script
- 在按钮旁边加文字1.打开editor/js/ 两个js文件fckeditorcode_gecko.js fckeditorcode_ie.j
- 页面大小、窗口大小和滚动条位置这三个数值在不同的浏览器例如Firefox和IE中有着不同的实现。即使在同一种浏览器例如IE中,不同版本也有不
- FrontPage服务器扩展可以做以下工作:(1),保存和检索Web服务器的文件;(2),远程执行所有文件管理操作;(3),改名或移动文件时
- 当然有其它工具可以做这件事,但如果客户不允许你在服务器乱装东西时这个脚本就会有用了。 代码如下:DECLARE @tbImportTable
- 有两个结构完全相同的表,由其中一个表插入另一个表中指定条件的数据,报如下错误: 仅当使用了列列表并且 IDENTITY_INSERT 为 O
- 平时在PL/SQL中的编程中遇到一些问题,这里以问答的形式来进行把它们总结下来,以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 数据库的选择原则是什么?我只知道小网站用Access,大网站用SQL,请问它的具体选择原则是什么?在实际应用中,数据库的选择原则一般是:如果
- 刚才要说的是这几天亲身体验了一下ebay的AIR感觉挺不错的,无论从界面,交互,功能上都感觉挺好的。关于topic中的“剑走偏锋”是因为我认
- 首先,必须有错误继续进行的声明On Error Resume Next 然后尝试简历jmail实例: Dim JMail Set JMail
- 在新建数据库或附加数据库后,想添加关系表,结果出现下面的错误: 此数据库没有有效所有者,因此无法安装数据库关系图支持对象。若要继续,请首先使
- 我们打开Google的时候可能大家会发现,无论你输入Google的任何网址,它都根据你使用的语言自动判断并跳转到不同的语言界面。也就是你用不
- 创建与打开站点启动FrontPage XP,选择菜单“文件/新建”,再单击“网页或站点”命令选项。在“新建网页或站点”任务窗格
- 大概在2004年初的时候,我第一次买了一本很厚的书,名字或许叫《Dreamweaver MX从入门到精通》,很认真看着书并实践操作大约三分之
- var a = 0, b = 0;[0, 0].sort(function() {a = 1;return 0;});[0, 1].sort
- MySQL的本地备份和双机相互备份脚本:首先,我们需要修改脚本进行必要的配置,然后以root用户执行。◆1. 第一执行远程备份时先用 fir
- 以前的Dreamweaver中是没有图片处理功能的,即使你要处理也只能使用CSS中的相关滤镜进行一些效
- MySQL插件式存储引擎是MySQL数据库服务器中的组件,负责为数据库执行实际的数据I/O操作,并能允许和强制执行面向特殊应用需求的特定特性
- 这句代码在IE9之前曾被称为世界上最短的IE判定代码。代码虽短但确包含了不少javascript基础知识在里面。var ie&nb
- 今天看了篇关于Web Form Design的成功案例,虽然讲的事情很简单,但总结了一些方法,翻译过来做个原始积累吧,以后写东西举例子时也好