full website control with keyboard (no mouse)?

Question

So I started creating a site (html, css, js..) and I want to design my site so it's possible for someone without a mouse (just a keyboard) can use it.

If I have a div or li element, how can I make it get focus with ~~tab or~~ down arrow on the keyboard?

Example:

<ul class="nav-ul">
<li>
    <a href="" class="nav-link" id="link-home">1
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">2
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">3
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">4
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">5
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">6
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a href="" class="nav-link" id="link-home">7
        <img src="assets/home.png">
    </a>
</li>

Here, I want each li element to gain focus when down arrow is pressed on the keyboard.

EDIT:
tabindex DOES NOT WORK! i tried it many different ways. I want to have the same effect as it does when I hover over it.

EDIT 2

So I will make my question for clear. I do NOT want to use tab but instead it will be a D-pad (left, right, top, and bottom arrows).

Thank you.

tabindex http://stackoverflow.com/questions/13637223/how-do-you-make-a-div-tabbable — Andrew Bone, May 12 '16 at 14:06
Tried it as I was posting this. Doesn't work. I want it to have the same effect it has when I hover it with a mouse. I don't see any changes with `tabindex` — ᴛʜᴇᴘᴀᴛᴇʟ, May 12 '16 at 14:11
There is some reference here for keypress event particular down arrow: http://stackoverflow.com/questions/19347269/jquery-keypress-arrow-keys — Michael Eugene Yuen, May 12 '16 at 14:23
I would generally advise against implementing non-standard behaviour of arrow keys. Most people who are going to use them will be expecting them to scroll the document. — Quentin, May 12 '16 at 15:08
I wish I could +100 Quentins comment. If your going to do the important step of making your site accessible, stick to the standards. — Jamiec, May 12 '16 at 15:09
@SmitPatel, if you want to verify that keyboard-only users are going to be able to use your site, I'd recommend testing with an actual screen reader (such as http://www.nvaccess.org/). Much of what you're describing is default behavior for screen reading software. — zzzzBov, May 12 '16 at 15:10
I understand that but this is a very unique scenario where there is a special remote with a D-pad and that's the only thing the user can use to navigate through website. Scrolling wont be an issue because it will not overflow and fit on the screen — ᴛʜᴇᴘᴀᴛᴇʟ, May 12 '16 at 15:11
I have added the answer which focus the hyperlink instead of li so user can click the respective link. — Michael Eugene Yuen, May 12 '16 at 15:48
Also, look at the Adobe Mega Menu: https://adobe-accessibility.github.io/Accessible-Mega-Menu/ In particular, pay attention to the use of roles. Once you start to support arrow keys, many screen reader / assistive tech users have an expectation that it will behaving like an OS menu, which means a lot more scripting and roles management. — aardrian, May 20 '16 at 23:55

jano · Accepted Answer · 2016-05-30T07:03:02.130

The easiest way to achive this is to use tabindex attribute.

<li>
    <a href="" class="nav-link" id="link-home" tabindex='7'>7
        <img src="assets/home.png">
    </a>
</li>

Check some examples here

EDIT Navigating with left and right arrow:

document.addEventListener("keydown", function (e) {
   var focused = document.activeElement || document.body,
       focusables= document.getElementsByClassName("focusable"),
       len = focusables.length,
       step = 0;
   focusables = Array.from(focusables).sort(function(a,b) {
       return parseInt(a.tabIndex) - parseInt(b.tabIndex);
   });
   if (e.keyCode === 39) {
       step = 1
   }
   if (e.keyCode === 37) {
       step = -1
   }

   if (focused.tabIndex <0 || focused.tabIndex === len - 1 && step === 1) 
       focusables[0].focus()
   else if (focused.tabIndex === 0 && step === -1) 
       focusables[len-1].focus()
   else
       focusables[focused.tabIndex+step].focus()
});

Anything you need to do is to make your elements like this:

<a href="" class="nav-link focusable" id="link-home" tabindex="0">1
    <img src="assets/home.png">
</a>

Adding class focusable and setting tabindex Working example

Take a look here http://codepen.io/anon/pen/mPoZmd click on white space below your list and press tabs. Watch which list element gets focused — jano, May 12 '16 at 14:16
Ok I understand. I edited my question. Sorry i wasnt clear. Please see EDIT 2 in my question — ᴛʜᴇᴘᴀᴛᴇʟ, May 12 '16 at 14:19

Michael Eugene Yuen · Answer 2 · 2016-05-12T16:06:24.723

Is this what you are looking for?

var target = 1;
downarrow();
uparrow();
function downarrow() {
  $(document).keydown(function(e){
    if (e.keyCode == 40) {
      $('#' + target).addClass('active');
      $('#' + target).focus();
      $('a').not($('#' + target)).removeClass('active');
      target++;
    } 
    if (target === 8) {
     target = 1;
    };
  });
};
function uparrow() {
  $(document).keydown(function(e){
    if (e.keyCode == 38) {
      target--;
      if (target === 0) {
       target = 7;
      };
      $('#' + target).addClass('active');
      $('#' + target).focus();
      $('a').not($('#' + target)).removeClass('active');
    } 
  });
};

a.active {
  background-color: #b2b2b2;
  outline: 1px solid red ;
}

a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav-ul">
<li>
    <a id="1" href="" class="nav-link" id="link-home">1
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="2" href="" class="nav-link" id="link-home">2
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="3" href="" class="nav-link" id="link-home">3
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="4" href="" class="nav-link" id="link-home">4
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="5" href="" class="nav-link" id="link-home">5
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="6" href="" class="nav-link" id="link-home">6
        <img src="assets/home.png">
    </a>
</li>
<li>
    <a id="7" href="" class="nav-link" id="link-home">7
        <img src="assets/home.png">
    </a>
</li>

https://jsfiddle.net/jpjr1nbt/5/

REMARKS:

If you also want up arrow to scroll up. the keyCode is 38

this is great! I just prefer to do it simply (without ajax) so I decided to go with xosjasx's answer. thanks! — ᴛʜᴇᴘᴀᴛᴇʟ, May 13 '16 at 17:01

full website control with keyboard (no mouse)?

2 Answers2