快捷搜索:

CSS教程:是什么使得CSS改善了WEB网站的可访问性

近来,我不得纰谬我的一个客户的旧网站进行更新,使得它能够达到可造访性的标准。对三四年前的旧代码进行掘客的设法主见根本没有吸引力,主如果由于我曾经应用的很多编程常规已经不再适用,不凡是从可造访性上来讲。我曾经应用绝对的字体大年夜小,固定的页面宽度和表格来做版面设计和空间分配。

像那时建构的很多网站一样,我的客户的网站应用了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文件中得到风格并将他们利用到和

标签傍边,如表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。

您可能还会对下面的文章感兴趣: