网站重构：利用CSS改善网站可访问性

新客网 XKER.COM 2006-08-08 来源：收藏本文

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

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

问题是如何出现的？

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

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

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

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

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

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

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

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

开始

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

步骤1：检查现有代码

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

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

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

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

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

上一篇：总结：用CSS进行网页样式设计攻略全集下一篇：轻松Diy你的网页滚动条

【收藏】【评论】【推荐】【投稿】【打印】【关闭】