簡単なナビゲーションメニューキーボードにアクセスするには？

私はタブで最大とタブ+シフトダウンしてナビゲートすることができる簡単なulメニュー簡単なナビゲーションメニューキーボードにアクセスするには？

<ul role="menu" aria-label="menu"> 
    <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 1</a></li> 
    <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 2</a></li> 
    <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 3</a></li> 
    <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 4</a></li> 
</ul>

を持っています。しかし、ユーザーが上下に移動できるようにキーボードの矢印でアクセス可能にする方法はありますか？

出典

2016-12-08 Pawel_K

は '役割を追加= menu'ユーザーを言っていることで、注意してくださいOSメニューのように動作することが期待できます。また、キーボードからアクセスできるようにするために* [WAI-ARIAオーサリングプラクティス1.1]メニュー（https://www.w3.org/TR/wai-aria-practices-1.1/#メニュー）。 – aardrian

そしてここにあなたのコードと作業例： http://plnkr.co/edit/UeUEIvO4hKzsdlhSTdNg?p=preview

<body> 
    <ul role="menu" aria-label="menu"> 
     <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 1</a></li> 
     <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 2</a></li> 
     <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 3</a></li> 
     <li role="menuitem" tabindex="0" ><a target="_blank" href="http://www.google.com">item 4</a></li> 
    </ul> 
</body> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
$(document).keydown(
    function(e) 
    {  
     //38 is the keycode for arrow up 
     if (e.keyCode == 38) { 
      //check if a li is focused, if not it focus the first one  
      if($('li').is(':focus')){ 
      $("li:focus").next().focus(); 
      } 
      else{ 
      $("li:first-child").focus(); 
      } 

     } 
     else if (e.keyCode == 40) {  
      if($('li').is(':focus')){ 
      $("li:focus").prev().focus(); 
      } 
      else{ 
      $("li:first-child").focus(); 
      } 
     } 
    } 
); 
</script>

貴様のキーコードのリストがあります：https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

出典

2016-12-08 12:33:59 grogro

期待どおりに動作しますが、jsなしでこれを行うことはできますか？私は特定の役割、tabindexなどがjsなしで同じことを達成できると思っていた。私が間違っている？ –

tabindexを使用すると、htmlだけで "tab"を押して要素のフォーカスを合わせる順序を選択できますが、矢印を使用するにはjavacriptを使用する必要があります – grogro

元の意図と@ grogroのコメントをバックアップするだけです：arrowメニューをナビゲートするためのキーは、各メニューオプションをタブする必要があります。 [シンプルアクセシブルはこれに関する記事を書いて、助けてくれるコードを提供しました]（http://simplyaccessible.com/article/arrow-key-navigation/） – Skerrvy

簡単なナビゲーションメニューキーボードにアクセスするには？

答えて

関連する問題