CODEWITHSUNDEEP
htmlcssaccessibility
sir_K
sir_K

Reputation: 518

How to make simple nav menu keyboard accessible?

I have a simple ul menu

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

I can navigate with up with tab and down tab + shift. But how to make it accessible with keyboard arrows so users can navigate up and down?

Upvotes: 1

Views: 3791

Answers (1)

grogro
grogro

Reputation: 535

And here a working example with your code : 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>

There is a list of the differents keycodes : https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

Upvotes: 2

Related Questions