Tuesday, March 3rd, 2009


Category: Accessibility, JavaScript, Library

Daniel Steigerwald has written a nice little standalone library for accessibility called QFocuser.

It features:

  • allow to your widget to listen key events when its focused
  • focus can be enabled on any element
  • fires focus and blur events (so your table row will NOT remain highlighted after click out of table for example)
  • make your widget to be accessible by tab key
  • tiny and library agnostic
  • Works also in Safari!

You can give it a test drive.

As far as usage, you can do things as easily as this:


  1. var focuser = new QFocuser(widgetContainer, {
  2.   onFocus: function(focusedEl) { .. add highlighted class or whatever }
  3.   onBlur: function(focusedEl) { .. remove highlighted class or whatever }
  4. });
  6. // attach your own keys listeners
  7. $(focuser.getKeyListener()).addEvent('keydown', e.g. handleArrows);
  9. // when your widget decided to set the focus (and then receive key events)
  10. focuser.focus(tableRowForExample);

Posted by Dion Almaer at 6:58 am

3.9 rating from 30 votes


Comments feed TrackBack URI

It would be nice if it would block default action for arrow keys while focused on widget, so that I won’t scroll whole window, while changing rows.

Comment by paziek — March 3, 2009

This is nice! Imagine moving through your Gmail inbox with arrow keys instead of j/k keys!

@paziek … my window doesn’t scroll when I change rows with the arrow keys.

Comment by igitur — March 3, 2009

You’ve just imagined Opera’s Shift+arrow… But this script seems to break it, for compatibility you should disable it when Shift is pressed.

Comment by ywg — March 3, 2009

@igitur – why would you want to move your hands/fingers away from the home row?

Comment by thenobot — March 3, 2009

Good work Daniel, keyboard accessibility is important in most application.

I would just change the terms “focus/blur” to “activation/deactivation”, the terms “focus/blur” are reserved for elements having a cursor IMHO (CSS has in fact an “:active” pseudo for non form elements), sure that will impact on the name you picked.

Comment by dperini — March 4, 2009

Leave a comment

You must be logged in to post a comment.