本篇內(nèi)容介紹了“CSS怎么改善網(wǎng)站可訪問(wèn)性”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶(hù)，是我們最起碼的底線(xiàn)！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶(hù)多一個(gè)朋友！專(zhuān)注中小微企業(yè)官網(wǎng)定制，成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

網(wǎng)站重構(gòu):利用CSS改善網(wǎng)站可訪問(wèn)性

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

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

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

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

什么使得CSS更具有訪問(wèn)性？

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

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

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

要注意用戶(hù)定義的風(fēng)格只有在用戶(hù)的風(fēng)格名稱(chēng)與HTML頁(yè)面中的標(biāo)簽相符時(shí)才會(huì)起作用，這是很重要的。這就將確保兼容性的責(zé)任交到了開(kāi)發(fā)者的手中。例如，如果用戶(hù)的風(fēng)格單指定<p>標(biāo)簽應(yīng)顯示1.5emArial文本，但是HTML頁(yè)面并不使用<p>標(biāo)簽來(lái)從風(fēng)格單中調(diào)用一個(gè)風(fēng)格（也許它使用<fontclass=”bodytext”>），用戶(hù)對(duì)于<p>標(biāo)簽定義的風(fēng)格將會(huì)被忽略。因此要確保你對(duì)你的標(biāo)題和段落使用標(biāo)準(zhǔn)的HTML標(biāo)簽，這將減少用戶(hù)定義的風(fēng)格單被忽略的機(jī)會(huì)。

開(kāi)始

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

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

為了更好地說(shuō)明，我將用在表A中這個(gè)簡(jiǎn)單的HTML代碼來(lái)代表一個(gè)使用CSS的頁(yè)面。這個(gè)例子假設(shè)頁(yè)面還沒(méi)有使用CSS，不過(guò)你也可以使用相似的方法來(lái)評(píng)價(jià)一個(gè)基于CSS的站點(diǎn)。主要的不同點(diǎn)就是大多數(shù)的改變將發(fā)生在CSS文件中而不是HTML文件中。

步驟2：從HTML中去掉所有特殊風(fēng)格標(biāo)簽

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

步驟3：從HTML中去掉并替換任何錯(cuò)用的標(biāo)簽

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

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

步驟4：建構(gòu)一個(gè)CSS文件來(lái)覆蓋風(fēng)格信息

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

為了使在HTML中應(yīng)用CSS文件變得容易，我使用了名為p和h3的風(fēng)格來(lái)對(duì)應(yīng)標(biāo)準(zhǔn)HTML標(biāo)簽。我使用了可變的字體大小，使得用戶(hù)可以輕松地在瀏覽器中增大或縮小字體大小。使用絕對(duì)大小可以防止瀏覽器對(duì)字體進(jìn)行大小的調(diào)整（除了Netscape6或以后的版本之外，它將不考慮絕對(duì)字體大?。Ｎ疫€在需要的地方指定了字體的種類(lèi)，重量和顏色。

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

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

步驟5：在HTML文件上附加新的風(fēng)格單

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

步驟6：驗(yàn)證代碼

整個(gè)過(guò)程的***一個(gè)步驟就是驗(yàn)證HTML代碼的可訪問(wèn)性。如果你對(duì)于CSS來(lái)說(shuō)是個(gè)新手的話(huà)，你***對(duì)CSS代碼也進(jìn)行驗(yàn)證。有很多種的工具都可以幫你對(duì)二者進(jìn)行驗(yàn)證。

我使用DreamweaverMX來(lái)檢查我的樣本代碼的可訪問(wèn)性。你可以通過(guò)在文件菜單中選擇CheckPage然后選擇CheckAccessibility來(lái)實(shí)現(xiàn)。任何錯(cuò)誤或是警告都會(huì)顯示出來(lái)，還包括出現(xiàn)位置的行號(hào)以及對(duì)問(wèn)題簡(jiǎn)要的解釋。你可以在DreamweaverMX的Reference工具中找到更多關(guān)于這些錯(cuò)誤和警告的內(nèi)容。你只要從Dreamweaver的Windows菜單中選擇Reference然后從Book菜單中選擇UsableNetAccessibilityReference就可以了。

此外，WorldWideWebConsortium(W3C)提供了超過(guò)30個(gè)的可訪問(wèn)性評(píng)估工具的鏈接。W3C還提供了針對(duì)HTML和CSS的基于Web的免費(fèi)驗(yàn)證器。

CSS可訪問(wèn)性和簡(jiǎn)單的管理

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

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

“CSS怎么改善網(wǎng)站可訪問(wèn)性”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享名稱(chēng)：CSS怎么改善網(wǎng)站可訪問(wèn)性
分享路徑：http://jinyejixie.com/article28/jogejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化、虛擬主機(jī)、標(biāo)簽優(yōu)化、企業(yè)建站、App設(shè)計(jì)

廣告

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