2021-04-04 分類: 網(wǎng)站建設(shè)
第一步,檢查
第二步,提供文字替代方案。
走查網(wǎng)頁上所有的圖片、iframe、object,檢查這些元素是否填寫了適當(dāng)?shù)腶lt屬性或者title屬性的值,看看這些值是否可以描述這些元素的內(nèi)容或者目的;heading元素是否標(biāo)記了內(nèi)容,而不僅僅是圖片或者背景圖片。
第三步,檢查表單。
是否有l(wèi)abel標(biāo)簽,這些label的for屬性是否通過填寫相應(yīng)表單元素的id來彼此綁定;label的標(biāo)簽包裹的范圍是否足夠大,一致鼠標(biāo)很容易的就能操作到;表單元素在被聚焦的時(shí)候是否有清晰的視覺反饋;提交和重置按鈕以及圖片按鈕是否標(biāo)記了文字或者在title中寫明了該按鈕的作用。強(qiáng)調(diào)一下,比如一個(gè)按鈕的樣式是一個(gè)放大鏡,那么替代文字的內(nèi)容一定不是“放大鏡”,而是“搜索”。
第四步,使用heading做信息架構(gòu)。
輔助技術(shù),特別是讀屏軟件,一般都會(huì)提供一個(gè)快捷鍵h,按h按鍵,焦點(diǎn)即可在heading之間切換,從而提高瀏覽效率。減輕讀屏軟件用戶了解當(dāng)前頁面內(nèi)容的障礙。雖然html5允許heading之間的嵌套,但是我絕對(duì)不推薦。
第五步,是否有blur()。
輔助技術(shù)一般都是依靠焦點(diǎn)來獲取內(nèi)容,所以這個(gè)事件從本質(zhì)上就使得輔助內(nèi)容無法獲得應(yīng)用了此方法的元素。this.onfocus=this.blur()這個(gè)是最傻的一句代碼了。
第六步,按ctrl+或者command+查看頁面是否可以被縮放。
也許你因?yàn)槟硞€(gè)效果使用了font-size-adjust:none,或者在viewport中設(shè)置了禁止用戶縮放,從而使得頁面無法縮放。老年人和使用11寸高檔筆記本的老板可是非常喜歡使用放大頁面的功能的。
第七步,添加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是指向首頁的那個(gè)鏈接。esc是停止播放音視頻,是停止,不是暫停。這兩個(gè)按鍵是迄今為止最能達(dá)成共識(shí)的快捷鍵了。另外,挖掘當(dāng)前頁面的最重要的一個(gè)功能,是最重要的。然后在這個(gè)功能開始的元素或者包裝元素上設(shè)置一個(gè)快捷鍵,按照順序的話,就是2吧。accesskey=2。不要將同一個(gè)值設(shè)置給多個(gè)元素,也不要使用字母作為快捷鍵。另外聚焦的事件不要單單依賴瀏覽器本身,請(qǐng)使用js或者相應(yīng)的鍵盤事件,然后聚焦給相應(yīng)的元素。
第九步,觸發(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)擊“返回首頁”按鈕,如果僅僅是鏈接的是#或者改變類似scrolltop的值,那么也一定利用js將焦點(diǎn)移動(dòng)到這個(gè)頁面的第一個(gè)有內(nèi)容的dom上。如果你通過一個(gè)按鈕觸發(fā)了一個(gè)組件窗口,在關(guān)閉這個(gè)組件窗口的時(shí)候,請(qǐng)把焦點(diǎn)重新移動(dòng)回到觸發(fā)這個(gè)窗口的按鈕上。
第十步,填寫一個(gè)簡(jiǎn)單的鏈接到之后,作為第一個(gè)內(nèi)容元素。
標(biāo)記的內(nèi)容是簡(jiǎn)要的說明,說明你在這個(gè)頁面上提供的快捷鍵。然后這個(gè)鏈接可以指向一個(gè)更加豐富的無障礙幫助頁面,并且給這個(gè)鏈接設(shè)置accesskey=0。
分享標(biāo)題:10個(gè)步驟提高網(wǎng)站訪問性
路徑分享:http://m.newbst.com/news4/106404.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、微信公眾號(hào)、外貿(mào)網(wǎng)站建設(shè)、外貿(mào)建站、做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容