Question

我有一个简单的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>

我可以使用tab和down tab + shift进行导航。但是如何使用键盘箭头访问它以便用户可以上下导航？

Answer 1

这是一个代码的工作示例： 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

如何使简单的导航菜单键盘可访问？

1 个答案: