网站重构：利用css改善网站可访问性_css教程

最近，我不得不对我的一个客户的旧网站进行更新，使得他能够达到可访问性的标准。对三四年前的旧代码进行挖掘的想法根本没有吸引力，主要是因为我原来使用的非常多编程惯例已不再适用，特别是从可访问性上来讲。我原来使用绝对的字体大小，固定的页面宽度和表格来做版面设计和空间分配。
 
 像那时建构的非常多网站相同，我的客户的网站使用了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的视窗系统菜单中选择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)。