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" class="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 e.g.:

<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', handleKeydown);

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) {
  const currentIndex = document.activeElement.tabIndex;
  const next = currentIndex + move;
  const items = document.querySelectorAll('.items');
  const targetElement = items[next];
  targetElement.focus();
}