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 [EMAIL PROTECTED] / 416-946-0423 _______________________________________________ fluid-work mailing list fluid-work@fluidproject.org http://fluidproject.org/mailman/listinfo/fluid-work
