6 must see sites with unique keyboard navigation

March 1, 20091 Comment
Facebook Twitter Pinterest Plusone

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.

Dropular

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.

minefff

FFFound

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.

fff

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.

antonio

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.

watchthis

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.

simpleview

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.

frelancegoogle

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.

Filed in: Web Design

About the Author ()

Paul is a regular 30 year old web bloke / programmer with a penchant for online marketing. This blog is a personal outlet, with an eclectic mix of articles.

Comments (1)

Trackback URL | Comments RSS Feed

Sites That Link to this Post

  1. 23 lesser spotted delicious alternatives. | December 19, 2010

Leave a Reply

Back to Top