js下拉菜單實現與可訪問性的思考

一、俗耐的開篇語

關於下拉菜單的可用性問題，我之前一直都是忽略的，可以說是不知道，常常僅僅止步於眼前的效果上。前段時間看到了Roger的”Accessing Nav Drop-Downs“一文，就是講了下下拉菜單的可用性問題。同時，巧的是，最近在看淘寶UED翻譯的《ppk談JavaScript》一書，其多次提到了可訪問性的問題，尤其在p28~p37對JavaScript及其一些可用性問題發表了自己的看法。其中主要的觀點和注意事項與Roger的文章是一致的。

這些閱讀的經歷讓我意識到自己長時間忽略下拉菜單的可訪問性，於是開始結合實際情況，思考自己以後需要注意和提高的地方。這讓我對下拉菜單實現方式選擇、標簽的使用等有了更加明確的認識。不太成熟的思考，僅用於交流。再具體講述下拉菜單的可訪問性之前，先簡單說說下拉菜單以及下拉菜單的實現吧。

二、關於下拉菜單及其實現

百度百科對“下拉菜單”一詞的解釋是：以條形菜單欄和菜單欄中每個菜單項的彈出菜單窗口兩部分組成，一般作為應用系統的主菜單使用。

不過這段話就像《盜夢空間》一樣，讓人很難懂。通俗點講，就是“經過/會點擊就會顯示列表的菜單”就叫做下拉菜單。在web上非常之常見，例如~~我隨便打開個頁面，啊，就像是我浏覽器現在顯示的百科的頁面的右上角：

或是隔壁的微博頁面，啊，果然，看左上角的廣場下拉：

恩恩，看來下拉菜單就像是男人一樣，滿地都是。就不一一舉例了，關於下拉菜單的實現，那方法可就多了，class切換，屬性綁定，js定位等，不同的頁面，不同的設計，不同的架構，就有不同的實現方法。由於每個項目，每個頁面的情況都不一樣，所以，不能輕易的下結論，你是大熊貓，是國寶，它是小野貓，是雜草。但是，就可用性而言，不同的方法優劣還是有標准來評判的，這個在後面會自然而然的展示。

現在，舉個切換class實現下拉效果的簡單例子，實例菜單原型來自Mtime時光網，//zxx:Mtime創始人在新浪微博上很活躍，你有興趣可以follow他， @馬日拉，你有沒有覺得這個名字很有遐想的空間呢？，截圖如下：

此導航下拉的每個下拉內容都已經通過CSS定位好了，但是，考慮到加載的原因，其下拉內容默認是未裝載的。也就是說，是鼠標移至導航內容上，才動態load下拉div並嵌入導航li標簽內的，如下圖所示：

當然，作為靜態demo頁面，沒有必要動態load下拉內容，所以，demo頁面的下拉div默認就是隱藏且裝載好的，於是，我們就可以通過簡單的class切換實現下拉效果。

首先是HTML結構，見下圖：

核心CSS代碼如下：

.i_n_l{display:none;}
.showtime_hover .i_n_l,.quiz_hover .i_n_l,.home_hover .i_n_l,
.movie_hover .i_n_l,.tv_hover .i_n_l,
.person_hover
.i_n_l,.blog_hover .i_n_l,.group_hover .i_n_l{display:block;}

可見，我們只要讓li標簽的class，例如“我的時光”所在li標簽，由”home”變成”home_hover”就可以控制下拉菜單的顯示與隱藏了，很簡單吧，所以，相應的js代表就會類似於下面：

<script>
    var o = document.getElementById("navigationRegion").getElementsByTagName("li");
    var l = o.length;
    for(var i=0; i<l; i+=1){
        o[i].onmouseover = function(i){
            var cl = o[i].className;
            if(/_on$/.test(cl) || /_hover$/.test(cl)){
                  return;
            }
            o[i].className = cl + "_hover";
        }(i);
        o[i].onmouseout = function(i){
            return function(){
                o[i].className = o[i].className.replace("_hover", "");
            }
        }(i);
    }
</script>

然後，效果就如下圖所示，截自IE6浏覽器：

您可以狠狠地點擊這裡：時光網下拉菜單demo

恩，不錯，效果良好，沒有兼容性問題，js代碼也算是簡潔易懂，開起來似乎大功告成。要是以前的我，估計也就會到這裡就結束了，沒有bug，測試工程師不會來找茬了。但是，實際上，此處下拉的可訪問性只能說是中等及格的水平。//zxx：不過貌似現在整個行業（即使淘寶這類重視前端的公司）的下拉菜單都只實現到這一程度，或許其中有著各種各樣的原因，但我個人感覺還是整個行業的水平有待提高。

為何說看似不錯的下拉菜單效果其實可用性低呢？繼續下文。

三、下拉菜單可訪問性問題

首先回答這個問題：什麼是可訪問性？

可訪問性是指你的網頁對任何人、在任何環境下都是可持續訪問的。但是，在目前，要使得所有的網站在任何情況下都保持完美無缺的可訪問性，這樣的要求比要求老板升職還要高，是不實際的，但是，在有限的范圍內，有著實際意義的，我們可以提高的地方還是很多的。常見的可訪問性問題有下面三個：

無腳本

這個主要是考慮到某些浏覽器不支持JavaScript的情況。例如Google的頁面中經常可見《noscript》標簽，其就考慮到這一點。但是，就我個人的觀點，如果您的網站不是面對亞非拉美這些國家，無腳本的問題其實是可以忽略的。當然，某些人員故意禁用JavaScript則另當別論。

沒有鼠標

這是經常會遇到的。有些用戶不使用鼠標，而是使用鍵盤，理由各種各樣。例如我自己，有時候懶惰到境界的時候，要是左手已經擱在鍵盤上，就懶得抬起我的右手，去移動點擊鼠標，多麻煩累人啊。直接左手指頭垂直動個幾厘米多輕松多方便啊；像我大學同學，電腦不知出了什麼問題，鼠標都是使用不靈，所以他的大部分上網操作都是鍵盤完成的；還有些用戶有手部殘疾（或缺陷）而無法控制鼠標做出微笑的移動，按鍵為他們提供了一個很好的備選方案，除非JavaScript開發人員忘記照顧他們。而實際上，包括我在內的許多前端開發工程師，或是省功夫，或是其他什麼原因，而將這部分人群當作成年的包裹，都扔掉了。

屏幕閱讀器

有些人不能使用常規的浏覽器。最典型的就是盲人和視力受損的人，他們無法看到屏幕上的任何東西。作為替代品，他們需要一個能把頁面內容大聲朗讀出來的程序。這就是屏幕閱讀器。

以前我純粹按照自己臆想的經驗，認為，盲人用戶用電腦，估計就是個夢，就算有屏幕閱讀器這類東西，估計也做不了什麼操作。但是，路要自己走才知道多遠，水要自己趟才知道多深。對自己沒有經歷過事情的認知往往總是不准確的，對於盲人用戶與上網的認識也是如此。我發現自己認知的偏差是因為騰訊CDC的“閉上眼睛用QQ – 盲人用戶探訪實錄”這篇文章。企鵝公司就是企鵝公司，有錢有人有訪談，這次訪談實錄對於像我這樣沒有機會親歷盲人用戶的開發人員來講是非常寶貴的一手資料，讓我意識到，盲人用戶也有些他們精彩的世界，他跟我們這些視力良好的人一樣，也是可以很好的體驗到web給我們生活帶來的快樂的。

//zxx：下面這段摘自“閉上眼睛用QQ – 盲人用戶探訪實錄”一文。

盲人用戶所有的電腦操作都依賴於讀屏軟件和鍵盤來完成。這三位用戶現在使用的都是永德讀屏軟件，它安裝後即在後台運行，把普