注：網(wǎng)站越來越重視用戶體驗，對于做網(wǎng)站的人員來說是否了解過一些可以增加網(wǎng)站可讀性的Tips? 今天騰訊ISUX的溫總向大家分享可提升網(wǎng)站訪問性的10個步驟，每一步都可以在20分鐘內(nèi)完成，這篇文章也可以在20分鐘內(nèi)看完。入職四周年，送上干貨，10步大幅提升網(wǎng)站可訪問性。每一步都可以在20分鐘內(nèi)完成。這篇文章也可以在20分鐘內(nèi)看完。
Note: the website is more and more attention to the user experience, for website personnel know too some can increase the readability of your site's tips? Today Tencent ISUX temperature total to everybody share can improve website access of 10 steps, every step can finish in 20 minutes, this article can also be read in 20 minutes. The four anniversary of the entry into the 10 step, dry cargo, greatly enhance the website accessibility. Each step can be completed within 20 minutes. This article can be read in 20 minutes.
第一步，檢查<title></title>，不允許空，不允許過長，簡潔明了。
The first step, check the <title></title>, do not allow air, not allowed to long, simple and clear.
<title></title>是第一個可以訪問到內(nèi)容的元素，所以一定要非常重視。當用戶切換瀏覽器Tab標簽的時候，一定最先聽到<title></title>標記的內(nèi)容。Title一定要能代表當前頁面的主題。這里的要求和SEO最佳實踐幾乎一致。
<title></title> is the first element that can access the content, so be sure to attach great importance to it. When the user switches the browser Tab tags, be sure to hear the contents of the <title></title> tag. Title must be able to represent the subject of the current page. The best practices for the requirements and SEO are almost the same.
第二步，提供文字替代方案。
Second step, to provide text alternatives.
走查網(wǎng)頁上所有的圖片、iframe、object，檢查這些元素是否填寫了適當?shù)腶lt屬性或者title屬性的值，看看這些值是否可以描述這些元素的內(nèi)容或者目的；heading元素是否標記了內(nèi)容，而不僅僅是圖片或者背景圖片。比如，下圖可以標記為“騰訊ISUX公共帳號二維碼”。
Check all the images, object, and iframe on the web to check if the elements fill out the appropriate ALT or title values to see if these values can describe the contents of the elements or the purpose of the heading element. For example, the following figure can be labeled as a public account of Tencent ISUX two-dimensional code".Third step, check the form.
第三步，檢查表單。
Third step, check the form.
是否有l(wèi)abel標簽，這些label的for屬性是否通過填寫相應表單元素的id來彼此綁定；label的標簽包裹的范圍是否足夠大，一致鼠標很容易的就能操作到；表單元素在被聚焦的時候是否有清晰的視覺反饋；提交和重置按鈕以及圖片按鈕是否標記了文字或者在title中寫明了該按鈕的作用。強調(diào)一下，比如一個按鈕的樣式是一個放大鏡，那么替代文字的內(nèi)容一定不是“放大鏡”，而是“搜索”。
Whether there is a label tag, the for attribute of these label by filling out the form elements of the ID to each other; the range of label tags is large enough, consistent with the mouse is easy to operate; the form element is focused on whether there is a clear visual feedback; submit and reset buttons and the picture button is marked with the role of the button. Stress, such as the style of a button is a magnifying glass, then the content of the replacement text must not be a magnifying glass, but search".
第四步，使用heading做信息架構(gòu)。
The fourth step, use heading to do information structure.
輔助技術(shù)，特別是讀屏軟件，一般都會提供一個快捷鍵h，按h按鍵，焦點即可在heading之間切換，從而提高瀏覽效率。減輕讀屏軟件用戶了解當前頁面內(nèi)容的障礙。雖然HTML5允許heading之間的嵌套，但是我絕對不推薦。
Assistive technology, especially the screen software, generally will provide a shortcut keys h, press h button, the focus can be switched between heading, so as to improve the efficiency of browsing. Reduce the barriers to reading the contents of the current page. Although HTML5 allows the nesting between heading, but I definitely do not recommend.
第五步，是否有blur()。
Fifth step, whether there is blur ().
輔助技術(shù)一般都是依靠焦點來獲取內(nèi)容，所以這個事件從本質(zhì)上就使得輔助內(nèi)容無法獲得應用了此方法的元素。this.onfocus=this.blur()這個是最傻的一句代碼了。
Auxiliary technology is generally to rely on the focus to get content, so the event from the nature of the auxiliary content can not get the elements of this method. This.onfocus=this.blur () this is the most stupid of a code.
第六步，按Ctrl+或者command+查看頁面是否可以被縮放。
The sixth step, press Ctrl+ or command+ to see if the page can be scaled.
也許你因為某個效果使用了font-size-adjust:none，或者在viewport中設置了禁止用戶縮放，從而使得頁面無法縮放。老年人和使用11寸高檔筆記本的老板可是非常喜歡使用放大頁面的功能的。
Perhaps you use the font-size-adjust:none, or in the viewport set up to prohibit the user scale, so that the page can not scale. Old people and the use of 11 inch high-end notebook boss but very like to use the function of the zoom page.
第七步，添加landmark角色。
Seventh step, add the landmark role.
這個是成本最低的方法了，添加的方法就是給相應功能的元素添加role這個屬性，并賦予響應的landmark值。一共有8個值，一般你只能用到6個：banner（banner）、complementary（輔助內(nèi)容區(qū)）、contentinfo（網(wǎng)站信息和版權(quán)）、form（表單）、main（主內(nèi)容區(qū)）、navigation（導航區(qū)）、search（搜索區(qū)）。如果一個表單，他僅僅是提供搜索功能，那么就將role設置為search，而不是form。
This is the lowest cost method, the method is to add the role to the corresponding functional elements of this attribute, and to give the response of the landmark value. A total of 8 values, generally you can only use 6: banner (banner), complementary (auxiliary content area), contentinfo (Web information and copyright), form (form), main (main content area), navigation (navigation area), search (search area). If a form, he simply provides search function, then set the search to role, not form.
第八步，設置快捷鍵。
Eighth step, set the shortcut keys.
1是指向首頁的那個鏈接。Esc是停止播放音視頻，是停止，不是暫停。這兩個按鍵是迄今為止最能達成共識的快捷鍵了。另外，挖掘當前頁面的最重要的一個功能，是最重要的。然后在這個功能開始的元素或者包裝元素上設置一個快捷鍵，按照順序的話，就是2吧。accesskey=2。不要將同一個值設置給多個元素，也不要使用字母作為快捷鍵。另外聚焦的事件不要單單依賴瀏覽器本身，請使用js或者相應的鍵盤事件，然后聚焦給相應的元素。
1 is the link to the home page. Esc is to stop playing audio and video, is to stop, is not suspended. These two buttons are so far the most common shortcut key to reach a consensus. In addition, mining the most important feature of the current page is the most important. And then set up a shortcut key, in order, in the order of 2. Accesskey=2. Do not set the same value to more than one element, and do not use the letter as the shortcut key. Also focus on the event not just rely on the browser itself, please use js or the corresponding keyboard event, and then focus to the corresponding elements.
第九步，觸發(fā)界面轉(zhuǎn)換需設置焦點。
The ninth step is to set the focus of the interface conversion.
比如，點擊一個按鈕，彈出了一個模態(tài)或者非模態(tài)的彈窗（不是瀏覽器彈窗），利用js把焦點移動到這個窗口的第一個有內(nèi)容的DOM上；再比如，點擊“返回首頁”按鈕，如果僅僅是鏈接的是#或者改變類似scrollTop的值，那么也一定利用js將焦點移動到這個頁面的第一個有內(nèi)容的DOM上。如果你通過一個按鈕觸發(fā)了一個組件窗口，在關(guān)閉這個組件窗口的時候，請把焦點重新移動回到觸發(fā)這個窗口的按鈕上。
For example, the click of a button, pop up a modal or modeless window (not the browser window), use js to move the focus to the window of the first content on DOM; again for example, click "back home" button, if just link is # or change the value of a similar scrolltop, then must use js to move the focus to the page the first content of DOM. If you trigger a component window by a button, turn the focus back on the button that triggers the window, when you close the window.
第十步，填寫一個簡單的鏈接到之后，作為第一個內(nèi)容元素。
The tenth step, fill out a simple link to the following, as the first element of the content.
標記的內(nèi)容是簡要的說明，說明你在這個頁面上提供的快捷鍵。然后這個鏈接可以指向一個更加豐富的無障礙幫助頁面，并且給這個鏈接設置accesskey=0。
The content of the tag is a brief description of the shortcuts you provided on this page. Then this link can point to a more rich accessibility page, and to give this link set accesskey=0.
魯公網(wǎng)安備 37010202002295號 版權(quán)所有 魯ICP備14024464號-4