Accessibility
Guidelines

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

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

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

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

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

レビュー・テスト方法

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

実装方法

良い実装例

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

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();
}

参考文献