注：網站越來(lái)越重視用(yòng)戶體驗，對(duì)于做(zuò)網站的(de)人(rén)員(yuán)來(lái)說是否了(le)解過一些可(kě)以增加網站可(kě)讀性的(de)Tips? 今天騰訊ISUX的(de)溫總向大(dà)家分(fēn)享可(kě)提升網站訪問性的(de)10個(gè)步驟，每一步都可(kě)以在20分(fēn)鐘(zhōng)内完成，這(zhè)篇文章(zhāng)也(yě)可(kě)以在20分(fēn)鐘(zhōng)内看完。
入職四周年，送上幹貨，10步大(dà)幅提升網站可(kě)訪問性。每一步都可(kě)以在20分(fēn)鐘(zhōng)内完成。這(zhè)篇文章(zhāng)也(yě)可(kě)以在20分(fēn)鐘(zhōng)内看完。
第一步，檢查<title></title>，不允許空，不允許過長(cháng)，簡潔明(míng)了(le)。
<title></title>是第一個(gè)可(kě)以訪問到内容的(de)元素，所以一定要非常重視。當用(yòng)戶切換浏覽器Tab标簽的(de)時(shí)候，一定最先聽(tīng)到<title></title>标記的(de)内容。Title一定要能代表當前頁面的(de)主題。這(zhè)裏的(de)要求和(hé)SEO最佳實踐幾乎一緻。
第二步，提供文字替代方案。
走查網頁上所有的(de)圖片、iframe、object，檢查這(zhè)些元素是否填寫了(le)适當的(de)alt屬性或者title屬性的(de)值，看看這(zhè)些值是否可(kě)以描述這(zhè)些元素的(de)内容或者目的(de)；heading元素是否标記了(le)内容，而不僅僅是圖片或者背景圖片。比如，下(xià)圖可(kě)以标記爲“騰訊ISUX公共帳号二維碼”。
第三步，檢查表單。
是否有label标簽，這(zhè)些label的(de)for屬性是否通(tōng)過填寫相應表單元素的(de)id來(lái)彼此綁定；label的(de)标簽包裹的(de)範圍是否足夠大(dà)，一緻鼠标很容易的(de)就能操作到；表單元素在被聚焦的(de)時(shí)候是否有清晰的(de)視覺反饋；提交和(hé)重置按鈕以及圖片按鈕是否标記了(le)文字或者在title中寫明(míng)了(le)該按鈕的(de)作用(yòng)。強調一下(xià)，比如一個(gè)按鈕的(de)樣式是一個(gè)放大(dà)鏡，那麽替代文字的(de)内容一定不是“放大(dà)鏡”，而是“搜索”。
第四步，使用(yòng)heading做(zuò)信息架構。
輔助技術，特别是讀屏軟件，一般都會提供一個(gè)快(kuài)捷鍵h，按h按鍵，焦點即可(kě)在heading之間切換，從而提高(gāo)浏覽效率。減輕讀屏軟件用(yòng)戶了(le)解當前頁面内容的(de)障礙。雖然HTML5允許heading之間的(de)嵌套，但是我絕對(duì)不推薦。
第五步，是否有blur()。
輔助技術一般都是依靠焦點來(lái)獲取内容，所以這(zhè)個(gè)事件從本質上就使得(de)輔助内容無法獲得(de)應用(yòng)了(le)此方法的(de)元素。this.onfocus=this.blur()這(zhè)個(gè)是最傻的(de)一句代碼了(le)。
第六步，按Ctrl+或者command+查看頁面是否可(kě)以被縮放。
也(yě)許你因爲某個(gè)效果使用(yòng)了(le)font-size-adjust:none，或者在viewport中設置了(le)禁止用(yòng)戶縮放，從而使得(de)頁面無法縮放。老年人(rén)和(hé)使用(yòng)11寸高(gāo)檔筆記本的(de)老闆可(kě)是非常喜歡使用(yòng)放大(dà)頁面的(de)功能的(de)。
第七步，添加landmark角色。
這(zhè)個(gè)是成本最低的(de)方法了(le)，添加的(de)方法就是給相應功能的(de)元素添加role這(zhè)個(gè)屬性，并賦予響應的(de)landmark值。一共有8個(gè)值，一般你隻能用(yòng)到6個(gè)：banner（banner）、complementary（輔助内容區(qū)）、contentinfo（網站信息和(hé)版權）、form（表單）、main（主内容區(qū)）、navigation（導航區(qū)）、search（搜索區(qū)）。如果一個(gè)表單，他(tā)僅僅是提供搜索功能，那麽就将role設置爲search，而不是form。
第八步，設置快(kuài)捷鍵。
1是指向首頁的(de)那個(gè)鏈接。Esc是停止播放音(yīn)視頻(pín)，是停止，不是暫停。這(zhè)兩個(gè)按鍵是迄今爲止最能達成共識的(de)快(kuài)捷鍵了(le)。另外，挖掘當前頁面的(de)最重要的(de)一個(gè)功能，是最重要的(de)。然後在這(zhè)個(gè)功能開始的(de)元素或者包裝元素上設置一個(gè)快(kuài)捷鍵，按照(zhào)順序的(de)話(huà)，就是2吧。accesskey=2。不要将同一個(gè)值設置給多(duō)個(gè)元素，也(yě)不要使用(yòng)字母作爲快(kuài)捷鍵。另外聚焦的(de)事件不要單單依賴浏覽器本身，請使用(yòng)js或者相應的(de)鍵盤事件，然後聚焦給相應的(de)元素。
第九步，觸發界面轉換需設置焦點。
比如，點擊一個(gè)按鈕，彈出了(le)一個(gè)模态或者非模态的(de)彈窗(chuāng)（不是浏覽器彈窗(chuāng)），利用(yòng)js把焦點移動到這(zhè)個(gè)窗(chuāng)口的(de)第一個(gè)有内容的(de)DOM上；再比如，點擊“返回首頁”按鈕，如果僅僅是鏈接的(de)是#或者改變類似scrollTop的(de)值，那麽也(yě)一定利用(yòng)js将焦點移動到這(zhè)個(gè)頁面的(de)第一個(gè)有内容的(de)DOM上。如果你通(tōng)過一個(gè)按鈕觸發了(le)一個(gè)組件窗(chuāng)口，在關閉這(zhè)個(gè)組件窗(chuāng)口的(de)時(shí)候，請把焦點重新移動回到觸發這(zhè)個(gè)窗(chuāng)口的(de)按鈕上。
第十步，填寫一個(gè)簡單的(de)鏈接到之後，作爲第一個(gè)内容元素。
标記的(de)内容是簡要的(de)說明(míng)，說明(míng)你在這(zhè)個(gè)頁面上提供的(de)快(kuài)捷鍵。然後這(zhè)個(gè)鏈接可(kě)以指向一個(gè)更加豐富的(de)無障礙幫助頁面，并且給這(zhè)個(gè)鏈接設置accesskey=0。
