isKey jQuery plugin

The Idea

Making sure the web isn't only accessible using the mouse is a critical aspect of universal web accessibility—expected and intuitive keyboard navigation is a must. HTML provides standard keyboard interaction for elements like <a>, <button>, and <input>. However, sometimes there are there are circumstances which require you to develop around the keyboard:

non-semantic elements like <div> or <span> are used for things like buttons
you're building more complex navigation for widgets, like a tree or a map
whatever else you need to do based on common keyboard interactions

The Keys

I decided to to write these utility functions, because I found myself copying the same code from project to project:

function name	returns true for e.which
isEnterKey	13
isDownArrowKey	40
isUpArrowKey	38
isRightArrowKey	39
isLeftArrowKey	37
isEndKey	35
isHomeKey	36

Using isKey

The following example is a code snippet from a Google Maps CodePen that uses $.isKey functions to make Google Maps API keyboard accessible. Simply pass the jQuery event into any of the functions.

$map.on('keydown', function(evt) {
                 if ($.isDownArrowKey(evt)) {
                  $panDown.click();
                  return false;
                 } else if ($.isUpArrowKey(evt)) {
                  $panUp.click();
                  return false;
                 } else if ($.isLeftArrowKey(evt)) {
                  $panLeft.click();
                  return false;
                 } else if ($.isRightArrowKey(evt)) {
                  $panRight.click();
                  return false;
                 }
                });