アクセシビリティ - 私は折り畳み式ナビゲーションバーを作成するには、ブートストラップ-UIを使用し、崩壊のトグルのように見えるようにスタイルのカスタムハイコントラストモードの切り替え、で追加されたどのようにアクセス

Question

ブートストラップナビゲーションバーの崩壊ボタンのキーボードを作るために：

<nav class="navbar navbar-default navbar-fixed-top dark" ng-controller="NavBarController"> 
    <header class="container container-fluid"> 
    <div class="navbar-header"> 
     <button tabindex="0" type="button" name="button" class="navbar-toggle" ng-click="isCollapsed = !isCollapsed" aria-expanded="false" aria-controlls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <i role="img" class="fa fa-bars"></i> 
     </button> 
     <high-contrast-switch class="btn navbar-btn navbar-right navbar-toggle"> 
     <i role="img" class="fa text-white fa-adjust" aria-label="High Contrast Mode"></i> 
     </high-contrast-switch> 
     <a href="/"><h1 class="logo navbar-text">Kupat Givat HaMivtar</h1></a> 
    </div> 
    <div uib-collapse="isCollapsed" class="navbar-collapse collapse" aria-expanded="true"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li du-scrollspy="donate"><a du-smooth-scroll="donate">Donate</a></li> 
     <li du-scrollspy="about"><a du-smooth-scroll="about">About</a></li> 
     <li du-scrollspy="stories"><a du-smooth-scroll="stories">Stories</a></li> 
     <li du-scrollspy="contact"><a du-smooth-scroll="contact">Contact</a></li> 
     </ul> 
    </div> 
    </header> 
</nav> 

わかりましたが、折り畳みコントロールにtabindexを指定しましたが、ボタンはscreen-xs解像度ではまだキーボードでアクセスできません。このGIFは

1. は高-C
2. 私の二ナビゲーションでページタイトル
3. 最初のnav項目を切り替えます（順番に）ページの焦点を合わせてタブ移動方法を示します。

私は二ナビゲーションを無効にテストしたが、私はナビゲーションバーのトグルボタンのキーボード・アクセスを有効にするにはどうすればよい競合

ことがないように思わましたか？

Answer 1

私は自分のマークアップでタイプミスがありました。 aria-controlls="navbar"の代わりに、012ind

Answer 2

ボタン要素は、tabindexを追加するなどしなくても、デフォルトでフォーカス可能です。あなたのコードで干渉している何か他のことをしている可能性がありますか？