ブートストラップメニューと選択（キーボードとIE）によるアクセシビリティ

Question

使用方法：Internet explore + keyboard。

アクセシビリティは非常に重要です。

私は現在、ブートストラップとオプションを使用してメニューを選択するシステムを持っています。

オプションが表示されないため、ブラインドユーザーは使用できません。

一部Javascript解決方法この問題を解決するには？

Demo JSFiddle

<ul> 
    <li class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
      Dropdown Example 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 


      <li style="width:450px"> 
       <div class="col-sm-3"> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
        <br /> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <a href="#"> 
         Link  
        </a> 
        <a href="#"> 
         Link 
        </a> 
        <a href="#"> 
         Link 
        </a> 
       </div> 
       <div class="col-sm-3"> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
        <br /> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
       </div> 
      </li> 
     </ul> 
    </li> 
    <li class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> 
      Dropdown Example 
      <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu" role="menu"> 


      <li style="width:450px"> 
       <div class="col-sm-3"> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
        <br /> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
       </div> 
       <div class="col-sm-3"> 
        <a href="#"> 
         Link 
        </a> 
        <a href="#"> 
         Link 
        </a> 
        <a href="#"> 
         Link 
        </a> 
       </div> 
       <div class="col-sm-3"> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
        <br /> 
        <select> 
         <option value="volvo">Volvo</option> 
         <option value="saab">Saab</option> 
         <option value="mercedes">Mercedes</option> 
         <option value="audi">Audi</option> 
        </select> 
       </div> 
      </li> 
     </ul> 
    </li> 
</ul>  

Answer 1

キーボードのユーザーは、スペースバーを使用してドロップダウンを切り替えたり、ボタンのキーを入力することができます。 aria-expanded属性をボタンに付けて、メニューが表示されているかどうかに応じてtrue/falseを切り替えることができます。キーボードのみを使用してユーザーがページをどのようにナビゲートするかを知りたい場合は、Webaim has a great guide here。

Answer 2

ここで問題となるのは、これらのドロップダウンにrole = "menu"がありますが、メニューではありません.ARIAメニューには、メニュー項目、チェックボックスメニュー項目、ラジオボタンメニュー項目、サブメニューのみが含まれます。 https://www.w3.org/TR/wai-aria/roles#menu

role = "menu"を削除すると正しく動作するはずです。あなたがrole='menu'やaria-expandedを使用するかどうか

Github bootstrap - Answer

Remove the role="menu" and it should work correctly. 

Answer 3

は全くあなたのコードの行動にに影響を与えていません。 ARIAのプロパティは、厳密には意味のためのものです。彼らが行うのは、あなたのページ上のオブジェクトの目的と意図に関して、支援技術（スクリーンリーダーなど）にヒントを与えることだけです。 https://www.w3.org/TR/aria-in-html/#role-not

あなたのコードはあなたのjavascriptのみに基づいて動作していません。私はキーボードだけであなたのフィーリンの例を使用することができません。スクリーンリーダーは関与していません。

ボタンのスペースを押して、メニュー項目を展開/折りたたんで部品が問題なくなるようにすることができます。メニュー項目をタブで移動することもできます。しかし、矢印キーを使って< select>内の項目を選択することはできません。 < select>コンポーネント上の矢印を押すと、値が実際に変更されますが、フォーカスがリンクに移動します。

<選択>を展開するalt + downarrowを試してみると、はに展開されずにフォーカスがリンクに移動します。

この例のアクセシビリティは非常に悪いです。

問題を解決する方法については、問題がどこにあるかを確認するために十分なコードが掲載されていません。フィーリンの例では、jquery.on()しか表示されません。

これは簡単に修正できます。ブートストラップなどのサードパーティのライブラリを使わずにネイティブhtmlを使用すると、この作業のデモを簡単に手に入れることができ、キーボード（およびスクリーンリーダー）でうまくいきます。

さらに多くのjavascriptが投稿されていると助かりますが、その間にコードのその部分にデバッグを集中することをお勧めします。