キーボードアクセス可能なドロップダウンメニューがサブメニューに反復されない

Question

ナビゲーションでこの問題を解決するために何か助けが必要です。リストアイテムにタブボタンを使用してフォーカスが当たったときにドロップダウンメニューを表示するナビゲーションを取得できますが、ドロップダウン（サブメニュー）を繰り返すタブを取得できず、次のリストアイテムタグ。

私は運がないとjQueryを試しましたが、現在はhtml、css、tabindexを使用しようとしていますが、まだ運がありません。

HTML

<nav aria-label="Main menu" id="globalNav" > 
     <ul> 
     <li class="dropdown" tabindex="0" ><a href="#"><span itemprop="name">Welcome</span></a> 
     <ul class="sub-menu"> 
     <li role="menuitem"><a href="#">Visitor</a></li> 
     <li role="menuitem"><a href="#">Aid</a></li> 
     <li role="menuitem"><a href="#">Payments</a></li> 
     </ul> 
     </li> 
    <li class="dropdown" tabindex="0"><a href="#"><span itemprop="name">Sports</span></a> 
     <ul class="sub-menu"> 
     <li role="menuitem"><a href="#">Basketball</a></li> 
     <li role="menuitem"><a href="#">Football</a></li> 
     <li role="menuitem"><a href="#">Soccer</a></li> 
     </ul> 
    </li> 
    </ul> 
    </nav> 

CSSここで

#globalNav { 
    width: 100%; 
    border-bottom: 3px solid rgba(74, 61, 48, 0.3); 
    padding: 0.54rem 0; 
    margin-top: 30px; 
    z-index: 10; 
    } 
    #globalNav ul {  
    list-style: none; 
    display: table; 
    margin: 0 auto; 
    font-size: 1rem; 
    text-transform: uppercase; 
    } 
    #globalNav ul li.dropdown { 
    display: table-cell; 
    padding: 0 10px; 
    border-left: 1px solid #EEE; 
    text-align: center; 
    } 

    #globalNav ul li.dropdown a{ 
    color: #4A3D30; 
    display: inline-block; 
    position: relative; 
    } 
    #globalNav ul li.dropdown a:hover, 
    #globalNav ul li.dropdown a:focus, 
    #globalNav ul li.dropdown a:active{ 
     color:#666; 
    } 

    #globalNav ul li.dropdown a.active:after{ 
     width: 100%; 
     background: #990000; 
    } 

    #globalNav ul li.dropdown a:after{ 
     content: ""; 
     display: block; 
     margin: auto; 
     height: 2px; 
     width: 0; 
     background-color: transparent; 
    } 
    /*Children GlobalNav*/ 
    #globalNav ul li.dropdown a ul.sub-menu { 
    } 

    #globalNav ul li.dropdown ul.sub-menu { 
     position: absolute; 
     display: none; 
     z-index: 100; 
     text-transform: none; 
     min-width: 256px; 
     max-width: 256px; 
    } 

    #globalNav ul li.dropdown:hover ul.sub-menu, 
    #globalNav ul li.dropdown:focus ul.sub-menu, 
    #globalNav ul li.dropdown:active ul.sub-menu{ 
    display: block; 
    background-color: #dcd8d6; 
    color: #4a3d30; 
    } 
    #globalNav ul li.dropdown ul.sub-menu:hover, 
    #globalNav ul li.dropdown ul.sub-menu:focus, 
    #globalNav ul li.dropdown ul.sub-menu:active { 
     background-color: #3f79c1; 
    } 

    #globalNav ul li.dropdown ul.sub-menu li a { 
    padding: 8px; 
    } 

は私codepenは、私は私が追加するには、いくつかのスクリプトを使用し

Answer 1

何かを明らかに欠けているように私は感じ http://codepen.io/nicban/pen/vmEEPr

ですフォーカスを持って歩いているアイテムにクラスを追加するDOMをそれを祖先に追加して表示することができます。フォーカスが変わるとクラスも削除されます。

ダムビットを削除/調整するためにそれを検討して以来、しばらくしています。

あなたが持っている問題の一部は、あなたがdisplay: noneを使用しているということです。つまり、キーボードはそれを見つけることができません。画面外のテクニックを使用する場合、ユーザーはコントロールにタブすることができます。

と同様にrole="menuitem"を削除してください。前者は、あなたがサポートしていない対話（矢印キーなど）を意味し、後者は、リーダーを選別するために正しく通知しない余分なタブストップを作成します。

// Get the nav by id 
    var pNav = document.getElementById("globalNav"); 

    function unClassy(){ 
     try { 
     // Remove the focus class 
     pNav.classList.remove("focus"); 
     // Remove the focus class from all its descendents 
     pNavDesc = pNav.getElementsByTagName('*'); 
     for(var i = 0; i<pNavDesc.length; i++){ 
      pNavDesc[i].removeAttribute("class"); 
     } 
     } catch (e) { 
     console.log(e); 
     } 
    } 

    /* For any clicks, clear the focus class from the nav and all its descendants, essentially closing the menu when a user clicks/taps outside of it. */ 
    document.documentElement.onclick=function() { 
     try { 
     unClassy(); 
     } catch (e) { 
     console.log(e); 
     } 
    } 

    /* Manipulate focus classes in navigation. */ 
    function classy(){ 
     try { 
     unClassy(); 
     // Add the focus class to items that have focus 
     // Get the element that currently has focus 
     var focusedElement = document.activeElement; 
     // If that element is the primary nav, add the class 
     if (focusedElement.id == pNav.id){ 
      // Add the focus class 
      pNav.classList.add("focus"); 
     } 
     // If nav contains the focused element, add the class 
     if (pNav.contains(focusedElement)){ 
      focusedElement.classList.add("focus"); 
      el = focusedElement; 
      while (el.parentNode) { 
      el.classList.add("focus"); 
      el = el.parentNode; 
      } 
     } 
     } catch (e) { 
     console.log(e); 
     } 
    } 

    /* Delay the assigning of classes to give the :focus a chance to catch up. There has to be a better way for this. */ 
    document.documentElement.addEventListener("keydown", delayClassy, false); 
    function delayClassy(){ 
     try { 
     setTimeout(classy, 200); 
     } catch (e) { 
     console.log(e); 
     } 
    }