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

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

html css

Html 如何使简单的导航菜单键盘可访问？,html,css,accessibility,Html,Css,Accessibility,我有一个简单的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=

我有一个简单的

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导航。但是如何使用键盘箭头访问它，以便用户可以上下导航？

下面是一个代码的工作示例：








$（文档）.keydown(
职能（e）
{    
//38是向上箭头的键代码
如果（e.keyCode==38）{
//检查li是否已聚焦，如果未聚焦，则聚焦第一个li
如果（$（'li'）。是（':focus'））{
$（“li:focus”）.next（）.focus（）；
}
否则{
$（“李：第一个孩子”）.focus（）；
}
}
如果（e.keyCode==40）{
如果（$（'li'）。是（':focus'））{
$（“li:focus”）.prev（）.focus（）；
}
否则{
$（“李：第一个孩子”）.focus（）；
}
}
}
);

这里有一个不同键码的列表：

按预期工作，但我可以在没有js的情况下这样做吗？我在想，没有js，具体的角色、tabindex等也可以实现同样的效果。我错了吗？使用tabindex，您可以通过只使用html按“tab”来选择元素聚焦的顺序，但是如果您想使用箭头，您必须使用javascriptJust来备份您的原始意图和@grogro的注释：导航菜单的箭头键肯定比必须通过每个菜单选项进行tab键更可取。见我上面的评论。使用

role=menu

意味着您不仅应该支持箭头键，还应该支持Home、End和Escape。请参阅for菜单。小心，通过添加

role=menu

您告诉用户，他/她可以期望它的行为类似于操作系统菜单。您还必须使其可通过键盘访问，并应遵循中概述的模式。

<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>