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的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)。
