3 minute read.

6 must see sites with unique keyboard navigation

Paul Anthony / March 1, 2009

Posted in: Archive

Keyboard navigation is something that many of us simply ignore. That’s the browsers job right? Well, it is sort of.  Some developers have decided to go the extra mile, and implement custom keyboard navigation on their sites, to further enhance keyboard navigation using javascript.

Even some sites which don’t implement custom javascript navigation via the keyboard can be improved by using a Greasemonkey or bookmarklet script, and the web community seems to be hungry for it, particularly for phototype sites like Flickr. On top of that tabIndex has got to be one of the most underused tag in HTML, and its an accessibility issue that we should all be taking notice of in 2009. The perfect solution uses a combination of tabindex with javascript that degrades gracefully to support both text browsers and screen-readers and modern browsers.

However if you are interested in getting your site keyboard ready – there are a couple of ways of implementing this, with most sites listed below-  jQuery seems to be the weapon of choice. We found the mountainTop jQuery plugin, to be a particularly easy way to implement custom navigation with the keyboard. Another one which has popped up recently is the jQuery Coverflow plugin by Paul Bakaus. Other contenders for the throne include this one I found via LastNight’s Party, and this great article on Keyboard shortcuts from OpenJS

Here are a few sites I love the keyboard navigation on.


URL: http://www.dropular.net

Dropular is a great new site for bookmarking images. The site is a new one – with a February launch but is already gaining traction as a worthy competitor to FFFound. Their javascript scroll navigation enables the sort of smooth scrolling that Opera users get out of the box. Uses the excellent jQuery scroll To plugin.



URL: http://ffffound.com/

FFFound offer keyboard options to control both the navigation and the layout, which is pretty cool. The javascript used is built on top of ProtoType. Prototype plugin from Frank Monnerjahn of as a result Adomas Platanavicius hard work on the mouse wheel implementation in Javascript.


Angeliki Giakoumi

URL: http://www.angelikigiakoumi.com

It might be flash based, and only partially enabled for keyboard nav, but the implementation of navigation on this site is awesome. I can see a similar jQuery implementation making waves with UI designers.


I watch this

URL: http://iwatchthis.com/

I watch this is a delicious for youtube, and it lends itself really well to the javascript scroll. Again this one was implemented via the scrollTo library. Marcus Ramberg explains really well the implementation.


AirtightInteractive SimpleViewer

URL: http://www.airtightinteractive.com/photos/

Simpleviewer offers a quick and easy XML based flash photo viewer. It’s been around for quite a bit, but still offers one of the best forms of flash based keyboard navigation.


Google Reader

URL: http://www.google.com/reader/

Google reader was one of the first web applications out there to really go to town on keyboard navigation. It raised the bar for other application developers to come along and match the implementation. In fact, it’s even been working on a keyboard implementation for the regular SERP’s.


Other interesting links

Hashtags – Implements the continous scrolling Ajax Pattern
DZone – Also implements continous scrolling
Continuous Scrolling with Javascript and ASP.NET
Javascript  Keyboard Widgets
UI Patterns – UI Pattern for continuous scrolling.

One response to “6 must see sites with unique keyboard navigation

Leave a Reply

Your email address will not be published. Required fields are marked *