JS下拉菜單實現(xiàn)與可訪問性問題的一些思考

1、張鑫旭在其個人網(wǎng)站上發(fā)表了一篇文章JS下拉菜單實現(xiàn)與可訪問性問題的一些思 考，文中為我們分享了他對于 JS下拉菜單實現(xiàn)與可訪問性問題的一些思考及實際經(jīng)驗， 現(xiàn)轉(zhuǎn)載于此，供大家借鑒學(xué)習(xí)。 全文如下：一、俗耐的開篇語關(guān)于下拉菜單的可用性問題，我之前一直都是忽略的，可以說是不知道，常常僅僅止步于眼前的效果上。前段時間看到了Roger的Accessing Nav Drop-Downs”一文，就是講了下下拉菜單的可用性問題。同時，巧的是，最近在看淘寶UED翻譯的ppk談JavaScript一書，其多次提到了可訪問性的問題，尤其在p28p37 對JavaScript 及其一些可用性問題發(fā)表了自己的看法。其

2、中主要的觀點和注意事項與Roger的文章是一致的。這些閱讀的經(jīng)歷讓我意識到自己長時間忽略下拉菜單的可訪問性，于是開始結(jié)合實際情況，思考自己以后需要注意和提高的地方。這讓我對下拉菜單實現(xiàn)方式選擇、標(biāo)簽的使用等有了更加明確的認(rèn)識。 不太成熟的思考，僅用于交流。再具體講述下拉菜單的可訪問性之前， 先簡單說說下拉菜單以及下拉菜單的實現(xiàn)吧。二、關(guān)于下拉菜單及其實現(xiàn)百度百科 對 下拉菜單”一詞的解釋是：以條形菜單欄和菜單欄中每個菜單項的彈出菜單窗口兩部分組成，一般作為應(yīng)用系統(tǒng)的主菜單使用。不過這段話就像盜夢空間一樣，讓人很難懂。通俗點講，就是經(jīng)過/會點擊就會顯示列表的菜單 ”就叫做下拉菜單。在 Web上非

3、常之常見，例如，我隨便打開個頁面，啊，就像是我瀏覽器現(xiàn)在顯示的百科的頁面的右 上角：或是隔壁的微博頁面，啊，果然，看左上角的廣場下拉:恩恩，看來下拉菜單就像是男人一樣，滿地都是。就不一一舉例了，關(guān)于下拉菜單的實 現(xiàn)，那方法可就多了，class切換，屬性綁定，js定位等，不同的頁面，不同的設(shè)計，不同的架構(gòu)，就有不同的實現(xiàn)方法。由于每個項目，每個頁面的情況都不一樣，所以，不能輕易 的下結(jié)論，你是大熊貓，是國寶，它是小野貓，是雜草。但是，就可用性而言，不同的方法 優(yōu)劣還是有標(biāo)準(zhǔn)來評判的，這個在后面會自然而然的展示?，F(xiàn)在，舉個切換 class實現(xiàn)下拉效果的簡單例子，實例菜單原型來自Mtime時光網(wǎng)，作

4、者注：Mtime創(chuàng)始人在新浪微博上很活躍，你有興趣可以follow 他，馬日拉，你有沒有覺得這個名字很有遐想的空間呢？截圖如下：此導(dǎo)航下拉的每個下拉內(nèi)容都已經(jīng)通過CSS定位好了，但是，考慮到加載的原因，其下拉內(nèi)容默認(rèn)是未裝載的。也就是說，是鼠標(biāo)移至導(dǎo)航內(nèi)容上，才動態(tài)load下拉div并嵌入導(dǎo)航li標(biāo)簽內(nèi)的，如下列圖所示：El -clt closs-1til -ill class*noa-eH tcer= 2 v滬娥的科先*p:. mtV 時光5 p iirK|r；i：bpspnrt-zl a：ss=cai.n.lchild style=f； hidden;height;226px; disl*

5、5a當(dāng)然，作為靜態(tài)demo頁面，沒有必要動態(tài)load下拉內(nèi)容，所以，demo頁面的下拉 div默認(rèn)就是隱藏且裝載好的，于是，我們就可以通過簡單的class切換實現(xiàn)下拉效果。ul xc= narigafionRegionJ首先是HTML結(jié)構(gòu)，見下列圖：tj title苣頁|1花&11竝卩；/ ：軸曬鬥廿11已 li token=2 elas5=+ hotS-SMT/c|i3on：-4nbsp;-；/5pnn-div style=oyerloA: hicen; hmigfit: 2ZEp冥：* 亡Idss= i_n_1 chllctSlhref* href* href= href* href hr

6、ef= href- href=h5xah5xd弋 h5Ktih5avh討ihZda11 tolcert-h3 class=,TCivih七七p: /nTmtime -comxefn class =rmylimek xJ R HYPERLINK ime ime, com/rno vie Am的電影 h-j:.cor/goip/=我的群組=cx/h5i-http;,匚口Ve.nbe/signin1-cen class=http: /wmw. rntime. ccm/member/si g ni n/?redi rectJpl=l ht p: /, .ntirie. coVne.nbe/si gni

7、n-edi rectUl=h七七：j! Hz.世i- /si .jnm,P?fleditUI=張鑫旭-鑫空間-養(yǎng)生活ht lp7/ HYPERLINK http:/www.zhsAg www.zhsAg x 由乂 at a tn核心CSS代碼如下:.i_n _ldisplay:non e;.showtime_hover.i_n,.quiz_hover.i_n,.home_hover.i_n_l,.movie_hover.i_n，.tv_hover.i_n,.pers on _hover.i_n _l,.blog_hover.i_n,.group_hover .i_ndisplay:block;

8、可見，我們只要讓li標(biāo)簽的class，例如 我的時光所在li標(biāo)簽，由” home變成” home_hover就可以控制下拉菜單的顯示與隱藏了，很簡單吧，所以，相應(yīng)的js代表就會類似于下面：var o = docume nt.getEleme ntByld(” navigati on Regi on).getEleme ntsByTagName(li);3.var l=oen gth;4.for(vari=0; i然后，效果就如下列圖所示，截自IE6瀏覽器:11首頁我的時光電彫電視* All我的時光我需龕我的群爼我的博容一J您可以狠狠地點擊這里：時光網(wǎng)下拉菜單demo恩，不錯，效果良好，沒有兼容

9、性問題，js代碼也算是簡潔易懂，開起來似乎大功告成。要是以前的我，估計也就會到這里就結(jié)束了，沒有bug，測試工程師不會來找茬了。但是，實際上，此處下拉的可訪問性只能說是中等及格的水平。作者注：不過貌似現(xiàn)在整個行業(yè)即使淘寶這類重視前端的公司的下拉菜單都只實現(xiàn)到這一程度，或許其中有著各種各樣的原因，但我個人感覺還是整個行業(yè)的水平有待提高。為何說看似不錯的下拉菜單效果其實可用性低呢？繼續(xù)下文。三、下拉菜單可訪問性問題首先答復(fù)這個問題：什么是可訪問性？可訪問性是指你的網(wǎng)頁對任何人、在任何環(huán)境下都是可持續(xù)訪問的。但是，在目前，要 使得所有的網(wǎng)站在任何情況下都保持完美無缺的可訪問性，這樣的要求比要求老板升

10、職還要高，是不實際的，但是，在有限的范圍內(nèi)，有著實際意義的，我們可以提高的地方還是很多 的。常見的可訪問性問題有下面三個：無腳本這個主要是考慮到某些瀏覽器不支持JavaScript的情況。例如Google的頁面中經(jīng)?？梢姌?biāo)簽，其就考慮到這一點。但是，就我個人的觀點，如果您的網(wǎng)站不是面對亞非拉美這些國家，無腳本的問題其實是可以忽略的。當(dāng)然，某些人員故意禁用JavaScript 則另當(dāng)別論。沒有鼠標(biāo)這是經(jīng)常會遇到的。 有些用戶不使用鼠標(biāo)， 而是使用鍵盤，理由各種各樣。例如我自己， 有時候懶惰到境界的時候，要是左手已經(jīng)擱在鍵盤上，就懶得抬起我的右手，去移動點擊鼠 標(biāo)，多麻煩累人啊。 直接左手指頭垂直

11、動個幾厘米多輕松多方便?。幌裎掖髮W(xué)同學(xué)，電腦不 知出了什么問題，鼠標(biāo)都是使用不靈， 所以他的大部分上網(wǎng)操作都是鍵盤完成的；還有些用戶有手部殘疾或缺陷而無法控制鼠標(biāo)做出微笑的移動，按鍵為他們提供了一個很好的備選方案，除非JavaScript 開發(fā)人員忘記照顧他們。而實際上，包括我在內(nèi)的許多前端開發(fā) 工程師，或是省功夫，或是其他什么原因，而將這部分人群當(dāng)作成年的包裹，都扔掉了。屏幕閱讀器有些人不能使用常規(guī)的瀏覽器。最典型的就是盲人和視力受損的人，他們無法看到屏幕上的任何東西。作為替代品，他們需要一個能把頁面內(nèi)容大聲朗讀出來的程序。這就是屏幕閱讀器。以前我純粹按照自己臆想的經(jīng)驗，認(rèn)為，盲人用戶用電腦

12、，估計就是個夢，就算有屏幕閱讀器這類東西，估計也做不了什么操作。但是，路要自己走才知道多遠(yuǎn)， 水要自己趟才知道多深。對自己沒有經(jīng)歷過事情的認(rèn)知往往總是不準(zhǔn)確的，對于盲人用戶與上網(wǎng)的認(rèn)識也是如此。我發(fā)現(xiàn)自己認(rèn)知的偏差是因為騰訊CDC的閉上眼睛用QQ -盲人用戶探訪實錄”這篇文章。企鵝公司就是企鵝公司，有錢有人有訪談，這次訪談實錄對于像我這樣沒有時機(jī)親歷盲人用戶的開發(fā)人員來講是非常珍貴的一手資料，讓我意識到，盲人用戶也有些他們精彩的世界，他跟我們這些視力良好的人一樣，也是可以很好的體驗到web給我們生活帶來的快樂的。作者注：下面這段摘自閉上眼睛用QQ -盲人用戶探訪實錄”一文。盲人用戶所有的電腦操

13、作都依賴于讀屏軟件和鍵盤來完成。這三位用戶現(xiàn)在使用的都是永德讀屏軟件，它安裝后即在后臺運(yùn)行，把普通的操作系統(tǒng)變成了帶語音的操作系統(tǒng)。盲人朋友依靠tab鍵，方向鍵和部分快捷鍵來調(diào)整目前光標(biāo)的所在位置，而每按一次鍵盤，或 屏幕上出現(xiàn)新的內(nèi)容， 或可操作界面上狀態(tài)出現(xiàn)任何變化，系統(tǒng)都會有語音提示， 這樣盲人朋友也可以像普通人一樣對電腦進(jìn)行操作了。由于多年的訓(xùn)練，盲人所用的語音庫的語速都非?？欤胀ㄈ穗y以識別。順帶說一句，目前國內(nèi)的讀屏軟件都不廉價，如永德是在1200左右，而一個盲人按摩師的月收入也就1、2千吧，問及他們是否會覺得這個軟件太貴，老板娘笑了笑說：我覺得值！ ”電腦和網(wǎng)絡(luò)給盲人帶來了全新的生活。圖片來自騰訊 CDC小黃和他的電腦右邊的數(shù)字鍵盤對他們很重要信息無障礙是我們應(yīng)盡的公益責(zé)任，而我國是