10步大幅提高網站可訪問性

送上乾貨，10步大幅提高網站可訪問性。每一步均可以在20分鐘內完成。這篇文章也能夠在20分鐘內看完。

第一步，檢查<title></title>，不容許空，不容許過長，簡潔

<title></title>**是第一個能夠訪問到內容的元素，因此必定要很是重視。當用戶切換瀏覽器Tab標籤的時候，必定最早聽到<title></title>標記的內容。Title必定要能表明當前頁面的主題。這裏的要求和SEO最佳實踐幾乎一致。

第二步，提供文字替代方案。

走查網頁上全部的圖片、iframe、object，檢查這些元素是否填寫了適當的alt屬性或者title屬性的值，看看這些值是否能夠描述這些元素的內容或者目的；heading元素是否標記了內容，而不單單是圖片或者背景圖片。好比，下圖能夠標記爲「騰訊ISUX公共賬號二維碼」。

第三步，檢查表單。

是否有label標籤，這些label的for屬性是否經過填寫相應表單元素的id來彼此綁定；label的標籤包裹的範圍是否足夠大，一致鼠標很容易的就能操做到；表單元素在被聚焦的時候是否有清晰的視覺反饋；提交和重置按鈕以及圖片按鈕是否標記了文字或者在title中寫明瞭該按鈕的做用。強調一下，好比一個按鈕的樣式是一個放大鏡，那麼替代文字的內容必定不是「放大鏡」，而是「搜索」。

第四步，使用heading作信息架構。

輔助技術，特別是讀屏軟件，通常都會提供一個快捷鍵h，按h按鍵，焦點便可在heading之間切換，從而提升瀏覽效率。減輕讀屏軟件用戶瞭解當前頁面內容的障礙。雖然HTML5容許heading之間的嵌套，可是我絕對不推薦。

第五步，是否有blur()。

輔助技術通常都是依靠焦點來獲取內容，因此這個事件從本質上就使得輔助內容沒法得到應用了此方法的元素。this.onfocus=this.blur()這個是最傻的一句代碼了。

第六步，按Ctrl+或者command+查看頁面是否能夠被縮放

也許你由於某個效果使用了font-size-adjust:none，或者在viewport中設置了禁止用戶縮放，從而使得頁面沒法縮放。老年人和使用11寸高檔筆記本的老闆但是很是喜歡使用放大頁面的功能的。

第七步，添加landmark角色

這個是成本最低的方法了，添加的方法就是給相應功能的元素添加role這個屬性，並賦予響應的landmark值。一共有8個值，通常你只能用到6個：banner（banner）、complementary（輔助內容區）、contentinfo（網站信息和版權）、form（表單）、main（主內容區）、navigation（導航區）、search（搜索區）。若是一個表單，他僅僅是提供搜索功能，那麼就將role設置爲search，而不是form。

第八步，設置快捷鍵。

1是指向首頁的那個連接。Esc是中止播放音視頻，是中止，不是暫停。這兩個按鍵是迄今爲止最能達成共識的快捷鍵了。另外，挖掘當前頁面的最重要的一個功能，是最重要的。而後在這個功能開始的元素或者包裝元素上設置一個快捷鍵，按照順序的話，就是2吧。accesskey=2。不要將同一個值設置給多個元素，也不要使用字母做爲快捷鍵。另外聚焦的事件不要單單依賴瀏覽器自己，請使用js或者相應的鍵盤事件，而後聚焦給相應的元素。

第九步，觸發界面轉換需設置焦點。

好比，點擊一個按鈕，彈出了一個模態或者非模態的彈窗（不是瀏覽器彈窗），利用js把焦點移動到這個窗口的第一個有內容的DOM上；再好比，點擊「返回首頁」按鈕，若是僅僅是連接的是#或者改變相似scrollTop的值，那麼也必定利用js將焦點移動到這個頁面的第一個有內容的DOM上。若是你經過一個按鈕觸發了一個組件窗口，在關閉這個組件窗口的時候，請把焦點從新移動回到觸發這個窗口的按鈕上。

第十步，填寫一個簡單的連接到以後，做爲第一個內容元素。

標記的內容是簡要的說明，說明你在這個頁面上提供的快捷鍵。而後這個連接能夠指向一個更加豐富的無障礙幫助頁面，而且給這個連接設置accesskey=0。

歡迎討論。完。

出處：騰訊ISUX (http://isux.tencent.com/ten-steps-enhance-web-accessibility.html)