妙用CSS來改善網(wǎng)站可訪問性

最近，我不得不對我的一個客戶的舊網(wǎng)站進行更新，使得它能夠達到可訪問性的標準。對三四年前的舊代碼進行挖掘的想法根本沒有吸引力，主要是因為我曾經(jīng)使用的很多編程慣例已經(jīng)不再適用，特別是從可訪問性上來講。我曾經(jīng)使用絕對的字體大小，固定的頁面寬度和表格來做版面設(shè)計和空間分配。 像那時建構(gòu)的很多網(wǎng)站一樣，我的客戶的網(wǎng)站使用了Cascading Style Sheets (CSS)來格式化文本。它沒有使用任何CSS的更加強有力的版面設(shè)計功能，也沒有允許HTML設(shè)備獨立，而這是CSS可訪問性的主要優(yōu)點之一。

問題是如何出現(xiàn)的？

在我概述使網(wǎng)站更加具有可訪問性的方法之前，了解現(xiàn)今眾多的訪問性問題的起因也許是很有幫助的：

對HTML膚淺的理解：

在1990年代的互聯(lián)網(wǎng)大發(fā)展時期中，所有人都開始建構(gòu)網(wǎng)站。WYSIWYG編輯器使得幾乎每個人都可以很容易地建構(gòu)一個網(wǎng)站，而不用費心去學習HTML。但不幸的是，這種在使用上的便利帶來了一些蹩腳的代碼，對可訪問性造成了妨礙。

HTML在設(shè)計方面的局限性：

開發(fā)者和設(shè)計者經(jīng)常會故意錯用HTML標簽，特別是<table>標簽，來克服HTML在版面和設(shè)計上的局限性。這種設(shè)計方式也會帶來妨礙可訪問性的代碼。

什么使得CSS更具有訪問性？

CSS在1996年出現(xiàn)，用來解決上述的問題。通過使用CSS，你可以將一個HTML文件的內(nèi)容與有關(guān)它的表現(xiàn)形式或風格的信息分離開來。這就使你可以應(yīng)用準確的格式化并達到想要得到的版面設(shè)計，而無需使用可能會讓屏幕閱讀器和專門的瀏覽器軟件產(chǎn)生困惑的HTML代碼。

例如，雖然HTML表格是用來排列表格式數(shù)據(jù)的，但他們也經(jīng)常被用來排列對齊一個頁面上的元素的。但是閱讀器和例如語音合成器的軟件要求有效的HTML代碼。因此當他們遇到一個頁面錯誤地使用了諸如一個表格的元素，產(chǎn)生的結(jié)果就會讓使用者感到莫名其妙。

CSS的另一個可訪問性的優(yōu)點就是它允許使用者定義他們自己的風格單，這個風格單可以與網(wǎng)站的風格單共同工作。因此，例如一個使用者可以設(shè)定，所有通過<p>標簽定義的文本都應(yīng)該是1.5em Arial，即使這個網(wǎng)站的風格單表示它應(yīng)該是18px Verdana Bold。

要注意用戶定義的風格只有在用戶的風格名稱與HTML頁面中的標簽相符時才會起作用，這是很重要的。這就將確保兼容性的責任交到了開發(fā)者的手中。例如，如果用戶的風格單指定<p>標簽應(yīng)顯示1.5em Arial文本，但是HTML頁面并不使用<p>標簽來從風格單中調(diào)用一個風格（也許它使用<font class=”bodytext”>），用戶對于<p>標簽定義的風格將會被忽略。因此要確保你對你的標題和段落使用標準的HTML標簽，這將減少用戶定義的風格單被忽略的機會。

開始

如果你是從頭開始建構(gòu)一個新的網(wǎng)站，那么通過CSS來改善可訪問性就會很容易。但你仍然可以輕松地將現(xiàn)有的網(wǎng)站轉(zhuǎn)變?yōu)镃SS形式。

步驟1：檢查現(xiàn)有代碼

為了更好地說明，我將用在表A中這個簡單的HTML代碼來代表一個使用CSS的頁面。這個例子假設(shè)頁面還沒有使用CSS，不過你也可以使用相似的方法來評價一個基于CSS的站點。主要的不同點就是大多數(shù)的改變將發(fā)生在CSS文件中而不是HTML文件中。

步驟2：從HTML中去掉所有特殊風格標簽

要在這個頁面中加入CSS，我首先需要去掉所有要控制內(nèi)容表現(xiàn)的標簽。樣本代碼使用了字體標簽來定義字體外觀，風格和顏色。去掉這些元素使得樣本代碼如表B所示。

步驟3：從HTML中去掉并替換任何錯用的標簽

現(xiàn)在我要去掉任何錯用的HTML標簽。在樣本代碼之中，一個表格用來在頁面的內(nèi)容創(chuàng)建一個15象素的邊緣，代碼還使用<br>標簽來創(chuàng)建段落。

在我去掉表格和<br>標簽之后，我將他們替換為適當?shù)臉撕?。例如，我對頁面標題使用<h2>標簽，用<p>標簽來顯示段落。使用這些標準HTML標簽使得之后的CSS的應(yīng)用變得非常容易，而且與用戶定義的風格單更加兼容?，F(xiàn)在的樣本代碼如表C所示。

步驟4：建構(gòu)一個CSS文件來覆蓋風格信息

現(xiàn)在我已經(jīng)從HTML文件中去掉了所有風格信息，我需要將這些信息轉(zhuǎn)移至一個CSS文件中。CSS文件僅僅是一個存為.css擴展名的文本文件，因此它可以在任何一個文本編輯器中進行創(chuàng)建。我使用的是Dreamweaver MX。

為了使在HTML中應(yīng)用CSS文件變得容易，我使用了名為p和h2的風格來對應(yīng)標準HTML標簽。我使用了可變的字體大小，使得用戶可以輕松地在瀏覽器中增大或縮小字體大小。使用絕對大小可以防止瀏覽器對字體進行大小的調(diào)整（除了Netscape 6或以后的版本之外，它將不考慮絕對字體大?。?。我還在需要的地方指定了字體的種類，重量和顏色。

要重新產(chǎn)生由HTML標記代碼創(chuàng)建的版面，我需要將<p>和<h2>標簽設(shè)置寬度為780象素。然而，由于我們的目的是將可訪問性大化，因此我將去掉寬度設(shè)置使得頁面能符合瀏覽器窗口的大小。而且我將讓HTML頁面使用瀏覽器的缺省邊緣，而不是用原始代碼的<table>標簽來重新創(chuàng)建15象素的空白，這也使得其它例如打印機等的設(shè)備來使用它的缺省邊緣設(shè)置。

表D顯示了我創(chuàng)建的CSS文件。我將它命名為Mystylesheet.css并將它放置在網(wǎng)站根目錄下的一個風格文件夾之中。

步驟5：在HTML文件上附加新的風格單

在創(chuàng)建了CSS文件之后，我在HTML文件中插入了它的風格。因為HTML文件已經(jīng)包括了所有在CSS文件中引用的標簽(<h2>和<p>)，所以我只需要連接到HTML文件頭部的風格單上就可以了。HTML文件從CSS文件中獲得風格并將他們應(yīng)用到<h2>和<p>標簽當中，如表E所示。

步驟6：驗證代碼

整個過程的最后一個步驟就是驗證HTML代碼的可訪問性。如果你對于CSS來說是個新手的話，你最好對CSS代碼也進行驗證。有很多種的工具都可以幫你對二者進行驗證。我使用Dreamweaver MX來檢查我的樣本代碼的可訪問性。你可以通過在文件菜單中選擇Check Page然后選擇Check Accessibility來實現(xiàn)。任何錯誤或是警告都會顯示出來，還包括出現(xiàn)位置的行號以及對問題簡要的解釋。你可以在Dreamweaver MX的Reference工具中找到更多關(guān)于這些錯誤和警告的內(nèi)容。你只要從Dreamweaver的Windows菜單中選擇Reference然后從Book菜單中選擇UsableNet Accessibility Reference就可以了。

此外，World Wide Web Consortium (W3C)提供了超過30個的可訪問性評估工具的鏈接。W3C還提供了針對HTML和CSS的基于Web的免費驗證器。

可訪問性和簡單的管理

雖然這里給出的例子是很簡單的，但它說明了利用CSS使你的站點更加具有可訪問性是非常容易的。而且，對于CSS的使用不止這一個優(yōu)點而已。

基于CSS的網(wǎng)站要比僅僅只有HTML的網(wǎng)站要好管理得多。CSS文件中的風格上的變化可以應(yīng)用到整個網(wǎng)站中而不需要改變網(wǎng)站中任何的HTML文件。而且CSS的使用縮小了每一個HTML文件的整體文件大小，因為所有的風格信息都存儲在了CSS文件之中。

因此如果你想要改善可訪問性的話，將其視為一個機會，而不是一個障礙。要了解更多關(guān)于CSS和可訪問性的內(nèi)容，你可以去看一看World Wide Web Consortium中的Web Accessibility Initiative (WAI)。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

分享題目：妙用CSS來改善網(wǎng)站可訪問性
分享地址：http://www.muchs.cn/news34/314534.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、網(wǎng)站設(shè)計公司、定制網(wǎng)站、自適應(yīng)網(wǎng)站、定制開發(fā)、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)