注：網(wǎng)站越來(lái)越重視用戶(hù)體驗(yàn)，對(duì)于做網(wǎng)站的人員來(lái)說(shuō)是否了解過(guò)一些可以增加網(wǎng)站可讀性的Tips? 今天騰訊ISUX的溫總向大家分享可提升網(wǎng)站訪(fǎng)問(wèn)性的10個(gè)步驟，每一步都可以在20分鐘內(nèi)完成，這篇文章也可以在20分鐘內(nèi)看完。入職四周年，送上干貨，10步大幅提升網(wǎng)站可訪(fǎng)問(wèn)性。每一步都可以在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>，不允許空，不允許過(guò)長(zhǎng)，簡(jiǎn)潔明了。
The first step, check the <title></title>, do not allow air, not allowed to long, simple and clear.
<title></title>是第一個(gè)可以訪(fǎng)問(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í)踐幾乎一致。
<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)頁(yè)上所有的圖片、iframe、object，檢查這些元素是否填寫(xiě)了適當(dāng)?shù)腶lt屬性或者title屬性的值，看看這些值是否可以描述這些元素的內(nèi)容或者目的；heading元素是否標(biāo)記了內(nèi)容，而不僅僅是圖片或者背景圖片。比如，下圖可以標(biāo)記為“騰訊ISUX公共帳號(hào)二維碼”。
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標(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)容一定不是“放大鏡”，而是“搜索”。
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ù)，特別是讀屏軟件，一般都會(huì)提供一個(gè)快捷鍵h，按h按鍵，焦點(diǎn)即可在heading之間切換，從而提高瀏覽效率。減輕讀屏軟件用戶(hù)了解當(dāng)前頁(yè)面內(nèi)容的障礙。雖然HTML5允許heading之間的嵌套，但是我絕對(duì)不推薦。
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ù)一般都是依靠焦點(diǎn)來(lái)獲取內(nèi)容，所以這個(gè)事件從本質(zhì)上就使得輔助內(nèi)容無(wú)法獲得應(yīng)用了此方法的元素。this.onfocus=this.blur()這個(gè)是最傻的一句代碼了。
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+查看頁(yè)面是否可以被縮放。
The sixth step, press Ctrl+ or command+ to see if the page can be scaled.
也許你因?yàn)槟硞€(gè)效果使用了font-size-adjust:none，或者在viewport中設(shè)置了禁止用戶(hù)縮放，從而使得頁(yè)面無(wú)法縮放。老年人和使用11寸高檔筆記本的老板可是非常喜歡使用放大頁(yè)面的功能的。
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.
這個(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。
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.
第八步，設(shè)置快捷鍵。
Eighth step, set the shortcut keys.
1是指向首頁(yè)的那個(gè)鏈接。Esc是停止播放音視頻，是停止，不是暫停。這兩個(gè)按鍵是迄今為止最能達(dá)成共識(shí)的快捷鍵了。另外，挖掘當(dāng)前頁(yè)面的最重要的一個(gè)功能，是最重要的。然后在這個(gè)功能開(kāi)始的元素或者包裝元素上設(shè)置一個(gè)快捷鍵，按照順序的話(huà)，就是2吧。accesskey=2。不要將同一個(gè)值設(shè)置給多個(gè)元素，也不要使用字母作為快捷鍵。另外聚焦的事件不要單單依賴(lài)瀏覽器本身，請(qǐng)使用js或者相應(yīng)的鍵盤(pán)事件，然后聚焦給相應(yīng)的元素。
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)換需設(shè)置焦點(diǎn)。
The ninth step is to set the focus of the interface conversion.
比如，點(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è)窗口的按鈕上。
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.
第十步，填寫(xiě)一個(gè)簡(jiǎn)單的鏈接到之后，作為第一個(gè)內(nèi)容元素。
The tenth step, fill out a simple link to the following, as the first element of the content.
標(biāo)記的內(nèi)容是簡(jiǎn)要的說(shuō)明，說(shuō)明你在這個(gè)頁(yè)面上提供的快捷鍵。然后這個(gè)鏈接可以指向一個(gè)更加豐富的無(wú)障礙幫助頁(yè)面，并且給這個(gè)鏈接設(shè)置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號(hào) 版權(quán)所有 魯ICP備14024464號(hào)-4