Keyboard Interaction for Re-ordering Portlets
shawhan.liem at utoronto.ca
Tue Jan 15 21:45:57 UTC 2008
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
Here is our initial thought about how this interaction might work with
- 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
- When a portlet is selected, ctrl+arrow is used to move portlets as in
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
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.
Adaptive Technology Resource Centre
University of Toronto
shawhan.liem at utoronto.ca / 416-946-0423
More information about the fluid-work