我們的目標(biāo)是用戶學(xué)習(xí)成本低,網(wǎng)間快捷鍵一致(不只是站內(nèi)),會(huì)使用屏幕閱讀器就能夠高效利用我們的網(wǎng)站。
只要使用wai-aria landmark role屬性,即可迎刃而解。landmark role幫助屏幕閱讀器用戶了解頁面區(qū)塊的用途,好快速地位到想要到的位置。使用方便,只要簡(jiǎn)單的在元素內(nèi)添加role屬性即可,可使用的值有 banner、complementary、contentinfo、form、main、navigation、search。視障用戶只要使用屏幕閱讀器的快捷鍵即可,如NVDA按快捷鍵d即可在頁面地標(biāo)間導(dǎo)覽,這樣就保證了網(wǎng)間訪問快捷鍵的一致性,使快捷鍵訪問更加可行。
3.強(qiáng)化現(xiàn)行通用模塊的書寫方式,利用屏幕閱讀器的標(biāo)題導(dǎo)航特性,提高視障用戶在模塊間跳轉(zhuǎn)的速度。
上面我們把頁面劃分為若干區(qū)塊,現(xiàn)在我們來看頁面的更小的單元——模塊。區(qū)塊有若干的模塊組成,模塊可以視為網(wǎng)頁中的某一功能或某一類信息的集合,比如“你可能認(rèn)識(shí)”、“最近訪客”。通用模塊的書寫方式我們借鑒了YUI使用的標(biāo)準(zhǔn)模塊格式,這種div和class的通用格式可以很容易地將模塊從一個(gè)網(wǎng)頁、區(qū)塊、甚至一個(gè)網(wǎng)站移至他處,Web頁面已經(jīng)從文檔格式轉(zhuǎn)變?yōu)槟K的集合。 <div class="mod"> <div class="hd"> <h3>Module Header</h3> </div> <div class="bd">Module content</div> <div class="ft">Module footer</div> </div>
屏幕閱讀器一般都提供標(biāo)題導(dǎo)航的功能,即視障用戶按某一快捷鍵(NVDA為h鍵)可在各級(jí)標(biāo)題間跳轉(zhuǎn)。我們利用這一特性,就可以方便的在各個(gè)模塊間跳轉(zhuǎn)。在實(shí)踐中,每條feed的結(jié)構(gòu)我們也是按照這種方式來書寫的,用戶可以先閱讀feed的標(biāo)題,如果不感興趣可以迅速跳至下條feed, 減少視障用戶的鍵盤操作。
4.降低信息噪音,減少干擾。
將重復(fù)信息和為明眼用戶提供的信息從屏幕閱讀器訪問序列中移除。
以feed為例,頭像鏈接的作用:
- 明眼用戶快速辨識(shí)好友,這對(duì)視障用戶沒有意義;
- 鏈接至好友主頁,與人名鏈接的作用一致,作用重復(fù);
為了減少干擾,我們可以使用tabindex=“-1”,將頭像鏈接從屏幕閱讀器訪問序列中移除。
以上是我們初步優(yōu)化的部分要點(diǎn),仍然有許多地方需要優(yōu)化,如彈出層焦點(diǎn)控制、動(dòng)態(tài)信息通知、組件可訪問性等,我們會(huì)持續(xù)跟進(jìn)。
原文:http://isux.tencent.com/pengyou-accessibility-practice.html
本文鏈接:http://m.95time.cn/tech/web/2011/8646.asp
出處:騰訊isux
責(zé)任編輯:bluehearts
上一頁 朋友網(wǎng)無障礙優(yōu)化實(shí)踐 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|