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

想讓網(wǎng)站人氣旺，這些細(xì)節(jié)你都了解嗎？

• 《為什么你的網(wǎng)站不賣(mài)座？11條理由告訴你！》
• 《好評(píng)如潮！幫你的網(wǎng)站吸引更多用戶(hù)的七大秘訣》
• 《騰訊精品好文！7個(gè)方法幫你全面提升WEB表單填寫(xiě)體驗(yàn)》

第一步

檢查<title></title>。

不允許空，不允許過(guò)長(zhǎng)，簡(jiǎn)潔明了。<title></title>是第一個(gè)可以訪問(wèn)到內(nèi)容的元素，所以一定要非常重視。當(dāng)用戶(hù)切換瀏覽器Tab標(biāo)簽的時(shí)候，一定最先聽(tīng)到<title></title>標(biāo)記的內(nèi)容。Title一定要能代表當(dāng)前頁(yè)面的主題。這里的要求和SEO最佳實(shí)踐幾乎一致。

第二步

提供文字替代方案。

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

第三步

檢查表單。

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

第四步

使用heading做信息架構(gòu)。

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

第五步

是否有blur()

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

第六步

按Ctrl+或者command+查看頁(yè)面是否可以被縮放。

也許你因?yàn)槟硞€(gè)效果使用了font-size-adjust:none，或者在viewport中設(shè)置了禁止用戶(hù)縮放，從而使得頁(yè)面無(wú)法縮放。老年人和使用11寸高檔筆記本的老板可是非常喜歡使用放大頁(yè)面的功能的。

第七步

添加landmark角色。

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

第八步

設(shè)置快捷鍵。

1是指向首頁(yè)的那個(gè)鏈接。Esc是停止播放音視頻，是停止，不是暫停。這兩個(gè)按鍵是迄今為止最能達(dá)成共識(shí)的快捷鍵了。另外，挖掘當(dāng)前頁(yè)面的最重要的一個(gè)功能，是最重要的。然后在這個(gè)功能開(kāi)始的元素或者包裝元素上設(shè)置一個(gè)快捷鍵，按照順序的話，就是2吧。

accesskey=2。不要將同一個(gè)值設(shè)置給多個(gè)元素，也不要使用字母作為快捷鍵。另外聚焦的事件不要單單依賴(lài)瀏覽器本身，請(qǐng)使用js或者相應(yīng)的鍵盤(pán)事件，然后聚焦給相應(yīng)的元素。

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

1. 《這50個(gè)photoshop快捷鍵技能你用起來(lái)了嗎？》
2. 《極速上手！120個(gè)PHOTOSHOP技巧幫你加速設(shè)計(jì)（上）》
3. 《極速上手！120個(gè)PHOTOSHOP技巧幫你加速設(shè)計(jì)（下）》

第九步

觸發(fā)界面轉(zhuǎn)換需設(shè)置焦點(diǎn)。

比如，點(diǎn)擊一個(gè)按鈕，彈出了一個(gè)模態(tài)或者非模態(tài)的彈窗（不是瀏覽器彈窗），利用js把焦點(diǎn)移動(dòng)到這個(gè)窗口的第一個(gè)有內(nèi)容的DOM上；再比如，點(diǎn)擊“返回首頁(yè)”按鈕，如果僅僅是鏈接的是#或者改變類(lèi)似scrollTop的值，那么也一定利用js將焦點(diǎn)移動(dòng)到這個(gè)頁(yè)面的第一個(gè)有內(nèi)容的DOM上。如果你通過(guò)一個(gè)按鈕觸發(fā)了一個(gè)組件窗口，在關(guān)閉這個(gè)組件窗口的時(shí)候，請(qǐng)把焦點(diǎn)重新移動(dòng)回到觸發(fā)這個(gè)窗口的按鈕上。

第十步

填寫(xiě)一個(gè)簡(jiǎn)單的鏈接到之后，作為第一個(gè)內(nèi)容元素。

標(biāo)記的內(nèi)容是簡(jiǎn)要的說(shuō)明，說(shuō)明你在這個(gè)頁(yè)面上提供的快捷鍵。然后這個(gè)鏈接可以指向一個(gè)更加豐富的無(wú)障礙幫助頁(yè)面，并且給這個(gè)鏈接設(shè)置accesskey=0。

歡迎討論。

【幫你點(diǎn)滿(mǎn)設(shè)計(jì)師的技能樹(shù)！】

Top 1：會(huì)寫(xiě)文案的設(shè)計(jì)師含金量更高！
《年度最佳教程！7招教你寫(xiě)出互聯(lián)網(wǎng)頂尖文案！》

Top 2：大眾點(diǎn)評(píng)的最強(qiáng)營(yíng)銷(xiāo)案例！高手出手就有料！
《重磅推薦！如何設(shè)計(jì)傳單才不會(huì)被人隨手扔掉？》

Top 3：回到本身，能賣(mài)出作品的設(shè)計(jì)才有價(jià)值！
《把你的作品賣(mài)出去！設(shè)計(jì)師做客戶(hù)演示的13個(gè)重大誤區(qū)》

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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