D-Pad navigation

On non-touch devices, the preferred method of app navigation is to use the available hardware keys.

KaiOS feature phones generally come up with 4 directional arrow keys and confirmation keys.

The steps below are guidelines on how to have your webapp respond to directional keys instead of using a cursor or touch controls.

Step 1

Use same class to group elements and make them a navigation candidate pool.

<div class="items">1</div>

<div class="items">2</div>

<div class="items">3</div>

<div class="items">4</div>

<input type="text" class="items"/>

<a href="more.html" clas="items">more..</a>

Step 2

Make every element focusable

  • HTMLAnchorElement/HTMLAreaElement with an href

  • HTMLInputElement/HTMLSelectElement/HTMLTextAreaElement/HTMLButtonElement without disabled

  • HTMLIFrameElement

Any element with a tabindex eg:

<div class="items" tabIndex="1"></div>

Step 3

Let target element execute focus() to become active element. After calling focus you can confirm it via document.activeElement.

Step 4

Active element listen keydown or keyup event:

document.activeElement.addEventListener('keydown', handleKeydownEvent);

Step 5

Handle ArrowUp, ArrowRight, ArrowLeft and ArrowDown keys:

function handleKeydown(e) {
  switch(e.key) {
    case 'ArrowUp':
      nav(-1);
      break;
    case 'ArrowDown':
      nav(1);
      break;
    case 'ArrowRight':
      nav(1);
      break:
    case 'ArrowLeft': 
      nav(-1);
      break;
  }
}

Step 6

Find next target element:

function nav (move) {
  var next = currentIndex + move;
  var items = document.querySelectorAll('.items');
  var targetElement = items[next];
  targetElement.focus();
}