讓網站飛起來！教你簡單10步大幅提升網站可訪問性

騰訊的同學入職四周年，送上干貨，教你10步大幅提升網站可訪問性。每一步都可以在20分鐘內完成。這篇文章也可以在20分鐘內看完，短小精悍的濃縮精華喲！

想讓網站人氣旺，這些細節你都了解嗎？

• 《為什么你的網站不賣座？11條理由告訴你！》
• 《好評如潮！幫你的網站吸引更多用戶的七大秘訣》
• 《騰訊精品好文！7個方法幫你全面提升WEB表單填寫體驗》

第一步

檢查<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或者相應的鍵盤事件，然后聚焦給相應的元素。

不了解瀏覽器的快捷鍵不要緊，但連這些快捷鍵+技巧都不知道就大大不行咯！

1. 《這50個photoshop快捷鍵技能你用起來了嗎？》
2. 《極速上手！120個PHOTOSHOP技巧幫你加速設計（上）》
3. 《極速上手！120個PHOTOSHOP技巧幫你加速設計（下）》

第九步

觸發界面轉換需設置焦點。

比如，點擊一個按鈕，彈出了一個模態或者非模態的彈窗（不是瀏覽器彈窗），利用js把焦點移動到這個窗口的第一個有內容的DOM上；再比如，點擊“返回首頁”按鈕，如果僅僅是鏈接的是#或者改變類似scrollTop的值，那么也一定利用js將焦點移動到這個頁面的第一個有內容的DOM上。如果你通過一個按鈕觸發了一個組件窗口，在關閉這個組件窗口的時候，請把焦點重新移動回到觸發這個窗口的按鈕上。

第十步

填寫一個簡單的鏈接到之后，作為第一個內容元素。

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

歡迎討論。

【幫你點滿設計師的技能樹！】

Top 1：會寫文案的設計師含金量更高！
《年度最佳教程！7招教你寫出互聯網頂尖文案！》

Top 2：大眾點評的最強營銷案例！高手出手就有料！
《重磅推薦！如何設計傳單才不會被人隨手扔掉？》

Top 3：回到本身，能賣出作品的設計才有價值！
《把你的作品賣出去！設計師做客戶演示的13個重大誤區》

原文地址：isux.tencent
作者：溫總

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量87萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：