Tab and arrow keys in the Lightbox component

[Colin Clark]

Hi all,

As I may have mentioned in my post last week, we're working on the 
keyboard-accessible functionality of the Lightbox component to start. 
Daphne and I have had a few discussions on Breeze about what key 
commands are most appropriate for this type of component.

After doing some quick research, here is a summary of the recommended 
behaviour for accessible keyboard navigation in rich internet applications:

1. The tab key moves focus between major areas of the page, in this 
case, to the collection of images as a whole. In HTML-speak, the 
container should have a tabindex of "0."

2. The arrow keys (up, down, left right) moves focus among images within 
a collection of images in a two-dimensional way. In HTML-speak, each 
image should have a tabindex of "-1" and the JavaScript should move focus.

There's still the question of how the user specifies a selection. Is it 
through the familiar cut-and-paste metaphor, or something else? It's my 
understanding that Daphne and Mike Elledge are going to discuss this 
functionality in more depth later this week, but it would be great to 
hear from others who have experience building keyboard accessible DHTML 
widgets.

Rich, does the ARIA Style Guide specify best practices for this type of 
interaction?

Here are a couple of relevant links:

Mozilla Developer Center's Key-navigable DHTML widgets article:
http://developer.mozilla.org/en/docs/Key-navigable_custom_DHTML_widgets

ARIA Roadmap, which provides general information on use of tabindex:
http://www.w3.org/TR/aria-roadmap/

Colin

-- 
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org