|
上述兩個實例都是一定程度上支持了鍵盤事件的下拉菜單的示例。但是，這里我要重重地轉(zhuǎn)折！這里的鍵盤支持的實際應(yīng)用價值是多少呢？開發(fā)的可行性又是多大呢？我的結(jié)論是：實際應(yīng)用價值低，開發(fā)的可行性低。
首先是使用價值，通過移動方向鍵顯示下拉菜單，就中國行情而言，就數(shù)十年來中國網(wǎng)民的使用習(xí)慣而言，就中國目前前端對方向鍵的支持情況來看，即使你嘔心瀝血做了個可以通過方向鍵控制下拉顯示的導(dǎo)航菜單，再即使你昭示天下此導(dǎo)航可方向鍵操作，有幾個人鳥你的賬呢？所以我說，在中國，在目前，方向鍵的可用性雖然看上去不錯，實際上沒有多大價值。
其次是開發(fā)的可行性，要知道，大部分的公司的資源人力有限，而且很多人能力有限，你說，花巨大的代碼成本搞個可用性很好（但受眾很小的）的下拉菜單，有必要嗎？可能嗎？你會嗎？
所以說，上面yahoo開發(fā)和Mozilla首頁的下拉的鍵盤方法是沒有任何實際應(yīng)用價值的，其意義僅在于學(xué)習(xí)、提高JavaScript水平，尤其在控制鍵盤事件上。
您可能會疑問，照我的結(jié)論，所謂“下拉菜單可訪問性”只是個空洞的理論，沒有實際價值嘛。哦，其實不然，我們其實可以找到即有實際應(yīng)用價值，同時又開發(fā)簡單常用，又能提高頁面鍵盤可用性的方法的。其關(guān)鍵就是focus事件。作為鍵盤用戶，最常用的是哪個鍵，一個是Enter回車鍵，另外一個就是Tab焦點切換鍵。Tab鍵可以讓頁面上的a標(biāo)簽以及表單元素(button, input)依次獲取焦點(如果沒有設(shè)置tabindex屬性的話)，當(dāng)Tab鍵切換到某個元素時，此元素其實已經(jīng)相應(yīng)了onfocus方法（大部分情況下未定義方法），此時如果按下Enter回車鍵，其實相對于觸發(fā)了onclick方法，如果a標(biāo)簽有鏈接的話，會打開鏈接的。
所以，我們可以拋開煩人的方向鍵，而專注于Tab鍵，以及Tab切換觸發(fā)的focus方法。我們再添加一個讓菜單獲取焦點的顯示下拉的方法，其不是大大提高了頁面的鍵盤可訪問性。而且onfocus方法本身與鍵盤無關(guān)，我們只需要專注于事件本身，而忽略鍵盤，所以開發(fā)成本是低的，非常可行的。
下面，就以mtime時光網(wǎng)的下拉為例，添加Tab鍵的下拉方法（其實是onfocus方法），看如果通過添加幾行額外的代碼，來大大提高頁面的可訪問性的。
五、給菜單添加focus事件增加鍵盤可用性
什么元素支持focus事件呢，據(jù)我所知為a標(biāo)簽，以及表單元素。所以，還是Mtime時光網(wǎng)的例子，我們要在下圖所標(biāo)示位置的a標(biāo)簽上添加focus方法，讓其獲取焦點時也能顯示下拉菜單：
由于鼠標(biāo)經(jīng)過也實現(xiàn)同樣的下拉效果，所以，我們需要將顯示下拉菜單的方法提出來，一番處理后，js代碼如下：
<script>
var o = document.getElementById("navigationRegion").getElementsByTagName("li");
var l = o.length, cache;
var menuTaga = function(obj){
//獲取a標(biāo)簽DOM對象
return obj.getElementsByTagName("a")[0];
}, menuDown = function(obj){
var cl = obj.className;
if(/_on$/.test(cl) || /_hover$/.test(cl)){
return;
}
obj.className = obj.className + "_hover";
}, menuUp = function(obj){
obj.className = obj.className.replace("_hover", "");
}, menuCache = function(obj){
if(cache){
menuUp(cache);
}
cache = obj;
}, menuEvent = function(obj){
obj.onmouseover = function(){
menuCache(this);
return menuDown(this);
};
obj.onmouseout = function(){
return menuUp(this);
};
menuTaga(obj).onfocus = function(){
menuCache(obj);
return menuDown(obj);
};
};
for(var i=0; i<l; i+=1){
menuEvent(o[i]);
}
</script>
上述方法除了focus方法之外，為了讓下拉顯示的列表也能通過Tab鍵訪問，所以，對當(dāng)前顯示的下拉對象cache了下，以能夠準(zhǔn)確收起之前展開的下拉菜單。
出處：zhangxinxu
責(zé)任編輯：bluehearts
上一頁 js下拉菜單實現(xiàn)與可訪問性的思考 [4] 下一頁 js下拉菜單實現(xiàn)與可訪問性的思考 [6]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 js下拉菜單實現(xiàn)與可訪問性的思考 [5]
