Accessibility
Guidelines

2.1.2 キーボード操作を可能にする

キーボード操作可能な場合、フォーカスが外せなくなると、ユーザーが操作出来なくなってしまうため、Tabキーでフォーカスの移動を行えるようにする。

モーダルダイアログを開いた場合など、マウスクリックでの非表示だけでなくESCキーでも閉じられるようにする。また、モーダルダイアログ内でのTabキーを使用した移動については、モーダルの最下部までフォーカスした後、次のフォーカスはモーダルの先頭になるように制御する。

ただし、次のような場合は例外とする。

ユーザー自身が導入した外部プラグインなどは、そのプラグインに依存するため対象外とする。

レビュー・テスト方法

  1. コードレビューによるチェック
  2. QAテスト(キーボードで操作できるかをテストする)

実装方法

Web

良い実装例

例:モーダルウィンドウの場合

Tabキーでボタンにフォーカスが移動出来る。 ESCキーでモーダルウィンドウをクローズ出来る。

<button type="button" onclick="onClick()">ボタン</button>
function onClick() {
  modal.close();
}

// キーボードイベントの実装
function onKeyup (e) {
  // ESCキー押下
  if (e.keyCode === 27) {
    modal.close();
  }
}

悪い実装例

例:モーダルウィンドウの場合

Tabキーを使えないようにし、クリックでのみクローズ出来る。

<button type="button" onclick="onClick()" tabindex="-1">ボタン</button>
function onClick() {
  modal.close();
}

Android

onKeyUp()、onKeyDown()をオーバーライドしてキーに対してのイベントを設定することが可能。

override fun onKeyUp(keyCode: Int, event: KeyEvent): Boolean {
  return when (keyCode) {
    KeyEvent.KEYCODE_A -> {
      move(MOVE_LEFT)
      true
    }
    KeyEvent.KEYCODE_S -> {
      move(MODE_BACK)
      true
    }
    else -> super.onKeyUp(keyCode, event)
  }
}

また修飾キーとの同時タップにおける操作を設定したい場合には、 event.isShiftPressedで修飾キーが押されているかを取得して条件分岐をすることで操作を変更できる。

override fun onKeyUp(keyCode: Int, event: KeyEvent): Boolean {
  return when (keyCode) {
    KeyEvent.KEYCODE_J -> {
      if (event.isShiftPressed) {
        fireLaser()
      } else {
        fireMachineGun()
      }
      true
    }
    KeyEvent.KEYCODE_K -> {
      if (event.isShiftPressed) {
        fireSeekingMissle()
      } else {
        fireMissile()
      }
      true
    }
    else -> super.onKeyUp(keyCode, event)
  }
}

参考文献