How to add key navigation to your web-site

This is probably an old topic which still raises here and there.

Day ago while waiting for delayed flight on United, I was doing some follow up on the discussion about my Theme for Gallery 3 and was asked if I could add support for Keyboard navigation.

In general, it is easy topic, especially when jQuery is supported for the web-site.

An objective is to allow visitor use keyboard to navigate. In my case it is applied to Gallery pagination enabling use of Left/Right/Up keys to move between photos or album pages.

While being simple in implementation, it adds a convenience for the end user enabling keyboard navigation versus mouse clicks.

So let’s add it…

First, we need some “anchors” on the page to find dynamically what our keys would do when pressed.

In case of my theme, I have paginator control allowing user navigate first/prev/next/last or go level up in the gallery structure (small arrow buttons/links), but it could be anything.

If we are to be W3C-friendly, then <link> tag in the header is more appropriate, but I am not going to use it in the example below. So let’s assume we have 5 links as following

<a title="First (Ctrl+Left)" id="g-navi-first" href="/first.html">First</a>
<a title="Prev (Left)" id="g-navi-prev" href="/prev.html">Prev</a>
<a title="Parent (Ctrl+Up)" id="g-navi-parent" href="/parent.html">Parent</a>
<a title="Next (Right)" id="g-navi-next" href="/next.html">Next</a>
<a title="Last (Ctrl+Right)" id="g-navi-last" href="/last.html">Last</a>

As you can see we have 5 different actions to take and we have selected key combinations we are going to use.
Code above by itself, would only work with mouse click.
What we need next is very small jQuery code to bring life into it and add desired keyboard sensitivity.
Please notice that it would override default arrow key based scroll support of the browser. So if you want to keep both then simply adjust code below to your liking.

There goes the code. Simply dump it into JS file and add reference in your page:

/**
*
* Copyright (c) 2010 Serguei Dosyukov, http://blog.dragonsoft.us
*
*/

$.fn.KbdNavigation = function() {

  $(this).bind("keydown", function(event) {
    var lnk = "";
    var lnk_first, lnk_prev, lnk_parent, lnk_next, lnk_last;
    lnk_first  = $("#g-navi-first").attr("href");
    lnk_prev   = $("#g-navi-prev").attr("href");
    lnk_parent = $("#g-navi-parent").attr("href");
    lnk_next   = $("#g-navi-next").attr("href");
    lnk_last   = $("#g-navi-last").attr("href");
   
    switch(event.keyCode) {
      case 0x25: // Ctr+Left/Left
        if(event.ctrlKey) { lnk = lnk_first; } else { lnk = lnk_prev; }
        break; 
      case 0x26: // Ctrl+Up
        if(event.ctrlKey) { lnk = lnk_parent; }
        break;
      case 0x27: // Ctrl+Right/Right
        if(event.ctrlKey) { lnk = lnk_last; } else { lnk = lnk_next; }
        break; 
    }
   
    if(lnk) {
      window.location = lnk;
      return true;
    }
   
    return true;
  });
}

$(document).ready( function() {
  $(document).KbdNavigation({});
});