關於網站銜接的十個身分
2016-05-13
網站內容推行29種辦法
2016-05-13
Show all

應用CSS改良網站可拜訪性

比來,我不能不對我的一個客戶的舊網站舉行更新,使得它可以或許到達可拜訪性的尺度。對三四年前的舊代碼舉行發掘的設法主意基本沒有吸收力,重要是由於我曾應用的許多編程通例已沒有再實用,特殊是從可拜訪性上來說。我曾應用絕對的字體巨細,牢固的頁面寬度和表格來做版面計劃和空間分派。

像當時建構的許多網站一樣,我的客戶的網站應用瞭Cascading Style Sheets (CSS)來格局化文本。它沒有應用任何CSS的加倍強有力的版面計劃功效,也沒有許可HTML裝備自力,而這是CSS可拜訪性的重要長處之一。

題目是若何湧現的?

在我概述使網站加倍具有可拜訪性的辦法之前,懂得當今浩瀚的拜訪性題目的原由大概是很有贊助的:

對HTML浮淺的懂得:在1990年月的互聯網大成長時代中,全部人都開端建構網站。WYSIWYG編纂器使得險些每一個人都能夠很輕易地建構一個網站,而不消操心去進修HTML。但沒有幸的是,這類在應用上的方便帶來瞭一些糟糕的代碼,對可拜訪性形成瞭妨害。

HTML在計劃方面的范圍性:開辟者和計劃者常常會有意錯用HTML標簽,特殊是%26lt;table%26gt;標簽,來戰勝HTML在版面和計劃上的范圍性。這類計劃方法也會帶來妨害可拜訪性的代碼。

甚麼使得CSS更具有拜訪性?

CSS在1996年湧現,用來辦理上述的題目。經由過程應用CSS,你能夠將一個HTML文件的內容與有關它的表示情勢或作風的信息分別開來。這就使你能夠運用精確的格局化並到達想要獲得的版面計劃,而無需應用大概會讓屏幕瀏覽器和專門的閱讀器軟件發生迷惑的HTML代碼。

比方,固然HTML表格是用來分列表格局數據的,但他們也常常被用來分列對齊一個頁面上的元素的。然則瀏覽器和比方語音分解器的軟件請求有用的HTML代碼。是以當他們碰到一個頁面毛病地應用瞭諸如一個表格的元素,發生的成果就會讓應用者覺得稀裡糊塗。

CSS的另外一個可拜訪性的長處就是它許可應用者界說他們本身的作風單,這個作風單能夠與網站的作風單配合事情。是以,比方一個應用者能夠設定,全部經由過程%26lt;p%26gt;標簽訂義的文本都應當是1.5em Arial,縱然這個網站的作風單表現它應當是18px Verdana Bold。

要留意用戶界說的作風隻要在用戶的作風稱號與HTML頁面中的標簽符合時才會起感化,這是很主要的。這就將確保兼容性的義務交到瞭開辟者的手中。比方,假如用戶的作風單指定%26lt;p%26gt;標簽應表現1.5em Arial文本,然則HTML頁面其實不應用%26lt;p%26gt;標簽來從作風單中挪用一個作風(大概它應用%26lt;font class=bodytext%26gt;),用戶對付%26lt;p%26gt;標簽訂義的作風將會被疏忽。是以要確保你對你的題目和段落應用尺度的HTML標簽,這將削減用戶界說的作風單被疏忽的機遇。

開端

假如你是重新開端建構一個新的網站,那末經由過程CSS來改良可拜訪性就會很輕易。但你仍舊能夠輕松地將現有的網站改變為CSS情勢。

步調1:檢討現有代碼

為瞭更好地解釋,我將用在表A中這個簡略的HTML代碼來代表一個應用CSS的頁面。這個例子假定頁面還沒有應用CSS,不外你也能夠應用類似的辦法來評價一個基於CSS的站點。重要的分歧點就是大多半的轉變將產生在CSS文件中而沒有是HTML文件中。

步調2:從HTML中去失落全部特別作風標簽

要在這個頁面中參加CSS,我起首須要去失落全部要掌握內容表示的標簽。樣本代碼應用瞭字體標簽來界說字體表面,作風和色彩。去失落這些元素使得樣本代碼如表B所示。

步調3:從HTML中去失落並調換任何錯用的標簽

如今我要去失落任何錯用的HTML標簽。在樣本代碼當中,一個表格用來在頁面的內容創立一個15象素的邊沿,代碼還應用%26lt;br%26gt;標簽來創立段落。

在我去失落表格和%26lt;br%26gt;標簽以後,我將他們調換為恰當的標簽。比方,我對頁面題目應用%26lt;h2%26gt;標簽,用%26lt;p%26gt;標簽來表現段落。應用這些尺度HTML標簽使得以後的CSS的運用變得異常輕易,並且與用戶界說的作風單加倍兼容。如今的樣本代碼如表C所示。

步調4:建構一個CSS文件來籠罩作風信息

如今我已從HTML文件中去失落瞭全部作風信息,我須要將這些信息轉移至一個CSS文件中。CSS文件僅僅是一個存為.css擴大名的文本文件,是以它能夠在任何一個文本編纂器中舉行創立。我應用的是Dreamweaver MX。

為瞭使在HTML中運用CSS文件變得輕易,我應用瞭名為p和h2的作風來對應尺度HTML標簽。我應用瞭可變的字體巨細,使得用戶能夠輕松地在閱讀器中增大或縮小字體巨細。應用絕對巨細能夠防備閱讀器對字體舉行巨細的調劑(除Netscape 6或今後的版本以外,它將沒有斟酌絕對字體巨細)。我還在須要的處所指定瞭字體的品種,重量和色彩。

要從新發生由HTML標志代碼創立的版面,我須要將%26lt;p%26gt;和%26lt;h2%26gt;標簽設置寬度為780象素。但是,因為我們的目標是將可拜訪性最大化,是以我將去失落寬度設置使得頁面能相符閱讀器窗口的巨細。並且我將讓HTML頁面應用閱讀器的缺省邊沿,而沒有是用原始代碼的%26lt;table%26gt;標簽來從新創立15象素的空缺,這也使得別的比方打印機等的裝備來應用它的缺省邊沿設置。

表D表現瞭我創立的CSS文件。我將它定名為Mystylesheet.css並將它安排在網站根目次下的一個作風文件夾當中。

步調5:在HTML文件上附加新的作風單

在創立瞭CSS文件以後,我在HTML文件中插入瞭它的作風。由於HTML文件已包含瞭全部在CSS文件中援用的標簽(%26lt;h2%26gt;和%26lt;p%26gt;),以是我隻須要銜接到HTML文件頭部的作風單上便可以瞭。HTML文件從CSS文件中得到作風並將他們運用到%26lt;h2%26gt;和%26lt;p%26gt;標簽傍邊,如表E所示。

步調6:考證代碼

全部進程的末瞭一個步調就是考證HTML代碼的可拜訪性。假如你對付CSS來講是個新手的話,你最好對CSS代碼也舉行考證。有許多種的對象都能夠幫你對兩者舉行考證。

我應用Dreamweaver MX來檢討我的樣本代碼的可拜訪性。你能夠經由過程在文件菜單當選擇Check Page然後挑選Check Accessibility來完成。任何毛病或是告誡都邑表現出來,還包含湧現地位的行號和對題目扼要的說明。你能夠在Dreamweaver MX的Reference對象中找到更多關於這些毛病和告誡的內容。你隻要從Dreamweaver的Windows菜單當選擇Reference然後從Book菜單當選擇UsableNet Accessibility Reference便可以瞭。

Comments are closed.