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

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 向上导航和向下 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

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

How to make simple nav menu keyboard accessible?

html

css

accessibility