rel Keyboard Navigation

Keyboard navigation is often missing on web sites. Its absence is especially frustrating on sites like Flickr where you simply want to move from photo to photo with a minimal amount of fuss. By providing a very simple way to add keyboard navigation I’m hoping to make it a little bit more popular.

There’s a rel attribute in (X)HTML that is used to define the relations the document has to other documents. With this mechanism we can, for example, easily state that a page is to the right of another page, in any of these ways:

<link rel="right" href="smurfs.html" />
<a rel="right" href="smurfs.html">Smurfs</a>

This information can then be accessed from JavaScript when arrow keys are pressed.

An Implementation

My photo gallery has a simple and elegant implementation of this idea that you’re free to use under the very liberal WTFPL. Here’s an example photo page – try going there and pressing the arrow keys on your keyboard.