輔助功能的JavaScript的下拉菜單

Question

我已經實現了我自己的下拉菜單，想澄清我的解決方案的可訪問性含義：

http://jsfiddle.net/tpHcv/5/

的一段代碼我很感興趣，現在是：

$('#sub-nav > li ul').each(function(index){ 

    var $this = $(this), 
     index = index + 1; 

    $this  
    .clone() 
    .appendTo('#main-nav > li:eq(' + index + ')'); 

}); 

'sub-nav'是每個人都通過CSS隱藏起來的。然後它被附加到相關的「主要導航」裏。這種方法是否會阻止使用輔助技術的人進入子菜單項？

請不要問我爲什麼這樣做。我只想說我無法訪問項目的原始標記，因此不能只按照我想要的方式將子菜單添加到標記中。

Answer 1

爲了獲得更大的可訪問性，請考慮添加鍵盤支持。當一個鏈接有焦點（通過標籤或其他），確保它的subnav是可見的。同樣，當一個subnav鏈接有焦點時，確保它是可見的。一些你可以通過:focus用css來完成。

這是不幸的，你沒有訪問標記。是否有理由需要克隆<ul>，還是隻需移動原始元素即可？用腳本來做你的dom操作，但是通過:hover僞類來顯示/隱藏css。

這讓你在那裏的一部分：http://jsfiddle.net/tpHcv/9/你仍然需要一些JavaScript來管理標籤，並專注於子項目。

#main-nav li > ul 
{ 
    display: none; 
} 

#main-nav > li a:focus + ul, 
#main-nav > li:hover > ul 
{ 
    display:block; 
} 

您的#main-nav鏈接會去任何地方，或者他們只是爲了觸發子導航？如果他們不去任何地方，爲了支持禁用JavaScript的瀏覽器，可以考慮最初用css隱藏#main-nav，然後用JavaScript顯示它。這種方式不會顯示，除非鏈接實際上會做某些事情。