網(wǎng)站越來越重視用戶體驗，對于做網(wǎng)站的人員來說是否了解過一些可以增加網(wǎng)站可讀性的Tips? 今天就向大家分享可提升網(wǎng)站訪問性的10個步驟，每一步都可以在20分鐘內(nèi)完成，這篇文章也可以在20分鐘內(nèi)看完。

第一步，檢查，不允許空，不允許過長，簡潔明了。
是第一個可以訪問到內(nèi)容的元素，所以一定要非常重視。當(dāng)用戶切換瀏覽器Tab標(biāo)簽的時候，一定最先聽到標(biāo)記的內(nèi)容。Title一定要能代表當(dāng)前頁面的主題。這里的要求和SEO最佳實踐幾乎一致。

第二步，提供文字替代方案。
走查網(wǎng)頁上所有的圖片、iframe、object，檢查這些元素是否填寫了適當(dāng)?shù)腶lt屬性或者title屬性的值，看看這些值是否可以描述這些元素的內(nèi)容或者目的；heading元素是否標(biāo)記了內(nèi)容，而不僅僅是圖片或者背景圖片。比如，下圖可以標(biāo)記為“騰訊ISUX公共帳號二維碼”。

第三步，檢查表單。
是否有l(wèi)abel標(biāo)簽，這些label的for屬性是否通過填寫相應(yīng)表單元素的id來彼此綁定；label的標(biāo)簽包裹的范圍是否足夠大，一致鼠標(biāo)很容易的就能操作到；表單元素在被聚焦的時候是否有清晰的視覺反饋；提交和重置按鈕以及圖片按鈕是否標(biāo)記了文字或者在title中寫明了該按鈕的作用。強(qiáng)調(diào)一下，比如一個按鈕的樣式是一個放大鏡，那么替代文字的內(nèi)容一定不是“放大鏡”，而是“搜索”。

第四步，使用heading做信息架構(gòu)。
輔助技術(shù)，特別是讀屏軟件，一般都會提供一個快捷鍵h，按h按鍵，焦點即可在heading之間切換，從而提高瀏覽效率。減輕讀屏軟件用戶了解當(dāng)前頁面內(nèi)容的障礙。雖然HTML5允許heading之間的嵌套，但是我絕對不推薦。

第五步，是否有blur()。
輔助技術(shù)一般都是依靠焦點來獲取內(nèi)容，所以這個事件從本質(zhì)上就使得輔助內(nèi)容無法獲得應(yīng)用了此方法的元素。this.onfocus=this.blur()這個是最傻的一句代碼了。

第六步，按Ctrl+或者command+查看頁面是否可以被縮放。
也許你因為某個效果使用了font-size-adjust:none，或者在viewport中設(shè)置了禁止用戶縮放，從而使得頁面無法縮放。老年人和使用11寸高檔筆記本的老板可是非常喜歡使用放大頁面的功能的。

第七步，添加landmark角色。
這個是成本最低的方法了，添加的方法就是給相應(yīng)功能的元素添加role這個屬性，并賦予響應(yīng)的landmark值。一共有8個值，一般你只能用到6個：banner（banner）、complementary（輔助內(nèi)容區(qū)）、contentinfo（網(wǎng)站信息和版權(quán)）、form（表單）、main（主內(nèi)容區(qū)）、navigation（導(dǎo)航區(qū)）、search（搜索區(qū)）。如果一個表單，他僅僅是提供搜索功能，那么就將role設(shè)置為search，而不是form。

第八步，設(shè)置快捷鍵。
1是指向首頁的那個鏈接。Esc是停止播放音視頻，是停止，不是暫停。這兩個按鍵是迄今為止最能達(dá)成共識的快捷鍵了。另外，挖掘當(dāng)前頁面的最重要的一個功能，是最重要的。然后在這個功能開始的元素或者包裝元素上設(shè)置一個快捷鍵，按照順序的話，就是2吧。accesskey=2。不要將同一個值設(shè)置給多個元素，也不要使用字母作為快捷鍵。另外聚焦的事件不要單單依賴瀏覽器本身，請使用js或者相應(yīng)的鍵盤事件，然后聚焦給相應(yīng)的元素。
第九步，觸發(fā)界面轉(zhuǎn)換需設(shè)置焦點。
比如，點擊一個按鈕，彈出了一個模態(tài)或者非模態(tài)的彈窗（不是瀏覽器彈窗），利用js把焦點移動到這個窗口的第一個有內(nèi)容的DOM上；再比如，點擊“返回首頁”按鈕，如果僅僅是鏈接的是#或者改變類似scrollTop的值，那么也一定利用js將焦點移動到這個頁面的第一個有內(nèi)容的DOM上。如果你通過一個按鈕觸發(fā)了一個組件窗口，在關(guān)閉這個組件窗口的時候，請把焦點重新移動回到觸發(fā)這個窗口的按鈕上。
第十步，填寫一個簡單的鏈接到之后，作為第一個內(nèi)容元素。
標(biāo)記的內(nèi)容是簡要的說明，說明你在這個頁面上提供的快捷鍵。然后這個鏈接可以指向一個更加豐富的無障礙幫助頁面，并且給這個鏈接設(shè)置accesskey=0。

分享文章：10步大幅提升網(wǎng)站可訪問性，簡單奏效
網(wǎng)頁URL：http://redsoil1982.com.cn/news28/321578.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、品牌網(wǎng)站建設(shè)、網(wǎng)站營銷、網(wǎng)站策劃、微信小程序、App開發(fā)

廣告

聲明：本網(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)