Keyboard Interaction for Re-ordering Portlets

[Shaw-Han Liem]

Hi Everyone,

We are currently working on preparing the Fluid Reorderer for
integration with the latest version of uPortal. Today, the ATRC team had
an interesting discussion about the keyboard interaction for re-ordering
portlets in a portal environment. It raised a couple of questions about
the interaction that I'd like to put out to the community.

Our current mouse interaction is based on the Yahoo Drag and Drop
Modules pattern. Check it out here:

- The Pattern: http://tinyurl.com/k9mpy
- An example implementation: http://my.yahoo.com

Our challenge is to come up with an equivalent set of keyboard
interactions that access this functionality.

In our previous implementation of the Reorderer (the lightbox image 
organizer), we treated the "set of reorderable items" as a grouped 
element. The user tabs through the page until they reach the group of 
items, and then uses arrow keys within the list to select which image 
they would like to act on (similar to the keyboard interaction for a menu).

When dealing with a portal, the issue becomes a little more complicated. 
Each portlet has arbitrary html content (links, images - perhaps even 
another reorderer) that the user will need to navigate through. Further, 
the user may not percieve the portlets as 'seperate spaces' at all, but 
expect to be able to tab through all portlet contents as on a simple 
static website.

Here is our initial thought about how this interaction might work with 
the keyboard:

- Tab key works as it does on My Yahoo or uPortal currently, focusing 
first on the portlet's container, and then each internal link in 
sequence. For the purposes of the reorderer, if a link within a portlet 
is in focus, we treat that portlet as 'selected'. When the last link in 
a portlet is focused, and the tab key is pressed, we should move to the 
first link in the next portlet.

- When a portlet is selected, the arrow keys are used to select adjacent 
portlets. When a new portlet is selected, we change focus to the portlet 
container.

- When a portlet is selected, ctrl+arrow is used to move portlets as in 
the lightbox.

We are not changing the tab behaviour here on the assumption that users 
expect a portal to function as a 'normal' website does. The arrow keys 
act as short-cuts that allow the user to skip to the next portlet, and 
also facilitate the 'move' action.

I'll be working on some mockups over the next day or so to help 
illustrate this, but I wanted to post these thoughts to the community in 
order to get some input on the interaction before we got too far into 
the implementation.

Also, for anyone on the list who is newish to ARIA and DHTML 
accessibility (as I am), I've updated the "UX Resources" wiki page with 
some links I found particularly useful in my research.

http://wiki.fluidproject.org/x/hAIa

Thanks,

Shaw-Han


-- 
Shaw-Han Liem
Adaptive Technology Resource Centre
University of Toronto
shawhan.liem at utoronto.ca / 416-946-0423