重构 – 设计之家

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

sj33cn — Sat, 07 Oct 2006 08:11:00 +0000

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

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

问题是如何出现的？

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

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

HTML在设计方面的局限性：开发者和设计者经常会故意错用HTML标签，特别是

标签，来克服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象素的边缘，代码还使用标签来创建段落。

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

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

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

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

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

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

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

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

步骤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 (WAI)。

重构、标准、布局

sj33cn — Thu, 26 May 2005 12:32:00 +0000

近来大家总是在标准上争论不休，其实，这些问题一些相关文章已经说得很明白了。
　　以下我就谈谈我的看法。本帖子有太多的“我认为”，说明了我只是想把我的想法拿出来跟大家商榷，或许有太多不对的地方，也请大家一一指出。
　　1、我对web标准的理解
　　所谓的web标准，在一些教程文章上已经得到结论：结构化标准（XHTML、XML）、表现标准（CSS、XSLT？）、行为标准（DOM、ECMAScript）。这些东西在网上一搜一大把，在这里我就不多说了。我只说我自己的想法：
　　a.标准是相对的，有其一定的局限性
　　作为标准本身，它也在不断地完善中。我们也可以加入其中完善它，而不是盲从它。没有最好，只有更好。（LeXRus前一阵子说要成立自己的web标准组织，不知道现在怎么样了。）
　　b.标准只是被推荐使用，好的标准大家都会自觉去遵守
　　我们之所以使用标准，就是因为标准对我们有利。正如现在倡导的ISO9000标准一样，它只是倡导，并不强迫。我认为它对我有用，所以我用它；同样，如果你认为它实在不怎么样，你也可以不用它，标准本身不应该带有任何强迫性。就跟打篮球一样，NBA是24秒进攻，我们是30秒进攻，我们要想加入NBA，就得用人家的规则。还有我们加入“世贸”也是，如果我们够拽，自己成立一个“世贸”，自己发布一套标准，也是可以的。
　　c.标准没有明确提到用P还是table
　　有些朋友很容易把标准简单地等同于“把table换成P”。我不这么认为，因为table也是符合xml规则的。含有table的页面照样可以通过XHTML1.0的验证。
　　d.“P布局”不只是用P进行布局
　　我们可以用一切可能的标签（包括table）对页面进行布局，目的就是要达到最优。它只是提出一个概念，一个全新的模式。坛子里也有人说过，“重要的是观念上的更新，而不是代码。”当然，我们的最终目的是代码的更新。
　　e.XHTML验证是手段，不是目的
　　有时，我们用&#106avascript来生成flash movie代码，以欺骗validator，通过验证。用这种方法，那么没有通不过验证的页面。如果只是玩玩，那是可以的。但是我怕会有些初学者太把validator当回事，甚至认为通过验证是最终目的。我的看法是：validator不过是一个工具，它帮助我们检查我们的页面是否符合标准，仅此而已。最终我们还是得按客户的要求设计我们的页面。
　　2、我为什么要用标准
　　有人会以为使用标准的目的就是为了达到标准。其实，《网站重构》一语道破天机：为了网站能“活”得更长久，为了提高网站的可访性，更为了降低成本，我们必须采用Web标准！这里有三个“为了”，没有一个是为了标准。标准只是手段。
　　接触“标准”后，我尝试去做一些符合“标准”的页面。当时，并不是很明确为什么要使用标准，只是出于一种好奇心理。中间也遇到了一些难题，有技术上的，也有观念上的。但是，现在我很乐意用P+css来给客户做网页。
　　用了标准以后，给我的感觉就是：代码精简了，维护方便了。
　　代码精简，可缩短页面装载时间。就算在当前宽带的条件下，我们也不应该放宽对自己的要求――精简代码（我想这也是每一个程序员对自己的要求），况且现在还有不少的拨号用户，以及手机上网/浏览的用户。这是一个分秒必争的社会。
　　严格按照标准，可以获得更高的兼容性。一个合格的网页制作者，他总是试图让网页达到最高的兼容性。当然，他要在效果与兼容性之间取得某种平衡。就像我们现在挑老公：既要有钱，也要靓仔。
　　维护方便，我甚至只要修改一下css就可以让整个页面呈现出完全不同的风格。这可以节省不少工作。
　　当然，我认为用标准最重要的一点是：向后兼容。用一个专业的术语就是：可持续发展。网络总是在不断地发展中，一个好的网页制作者，总得对未来的发展有一定的预见。就现在我知道的，以后一段时间确实是xml的天下，直到有更好的东西出来取代它。
　　每年都有太多的网站为了跟上时代，花不少钱在改版上。因为改版就意味着一切重来，包括代码，甚至程序。
　　标准还要求我们把数据交给XHTML（或者html、xml），把表现交给css，两者各司其职，结合起来。
　　3、为table平反
　　《网站重构》一书出来以后，也许有很大的误读成分，一些朋友把标准跟重构混淆了，甚至等同起来。我没看过这本书，不好做评价。
　　“在不改变代码外在行为的前提下，对代码做出修改，以改进程序的内部结构”，这就是重构。我认为“网站重构”兼有“P布局”跟“web标准”的意思。布局讲的是一种方法，标准讲的是一种规范，这是两码事。
　　web标准并不是说不用table，我找遍了网上的文章，没有找到一篇文章说web标准反对使用甚至建议不使用table标签，我想它是这样说的：建议不要使用table“布局”，而改用P+cs“布局”。
　　拿一个数据表来说，我认为用table来组织它是最好的解决方案。当然，你要用其他办法来实现也是可以的，但是我敢说都没有table来得简单、简洁。（也许有，只是我没找到？）当然，在学习阶段，强制自己不使用表格解决一切问题，还是蛮有用的。
　　以上说了这么多，与其说是我的想法，不如说是汇总了大家的想法。但求不贻笑大方，如果能对初学者有所裨益，那就阿弥陀佛了。