Accessibility
Guidelines

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

適合レベル

A

※各レベルについては適合レベルとはをご覧ください

概要

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

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

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

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

テスト・チェック方法

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

実装方法

Web

悪い実装例

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

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

<button type="button" onclick="onClick()" tabindex="-1">ボタン</button>

function onClick() {
  modal.close();
}

良い実装例

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

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

<button type="button" onclick="onClick()">ボタン</button>

function onClick() {
  modal.close();
}

// キーボードイベントの実装
function onKeyup (e) {
  // ESCキー押下
  if (e.key === 'Escape') {
    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)
  }
}

参考文献