我有一个简单的 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 导航。但是如何使用键盘箭头访问它以便用户可以上下导航？
最佳答案
这里是您的代码的工作示例: 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
关于html - 如何使简单的导航菜单键盘可访问？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41039045/