[Building Sakai] [WG: Accessibility] Student Project Opportunity Sakai CLE/jQuery-UI

[Colin Clark]

Hi Joe,

Thanks again for your help. Your video was really helpful, and I really like the idea of showing the on-screen keyboard in your screencast!

One thing wasn't clear to me from the video: are you switching into NVDA's focus mode before trying to interact with the Reorderer? 

This is the mode that you typically need to use when interacting with desktop-style widgets. The "application" role will cause most screen readers to switch modes automatically. We don't ship the Layout Reorder with an "application" role by default, since this will conflict with some types of content. Sakai could add it easily if it is appropriate. Otherwise users need to manually switch modes.

As for the keyboard shortcuts, I didn't quite understand what you mean. To clarify, there are two sets of completely equivalent shortcuts:

1. Arrow keys move focus between reorderable elements, control + arrow keys will move them. These are not intended for use with screen readers.
2. i, j, k, m move focus between reordeable elements. i moves focus up, j moves focus left, m moves focus down, and k moves focus right. As above, adding the control modifier will move the currently focused reorderable element. These have been tested to work in a variety of contexts with JAWS and NVDA.

I think we're getting close to figuring this out,

Colin

---
Colin Clark
http://fluidproject.org

On 2013-09-13, at 1:41 PM, "Humbert, Joseph A" <johumber at iu.edu> wrote:

> Hi Colin,
> 
> No that did not work for me either.  
> 
> In my demo video, I was attempting to move a "box" from one column to another using the ctrl + arrow key combination as stated in the instructions "CTRL + direction keys move the item." 
> 
> Ctrl + i/j/k/l is supposed to move focus from once "box" to another, " Direction keys (arrow keys or i-j-k-m) move focus." Not move the box from one column to another. But even using the Ctrl+ i/j/k/l keys did not move focus when using NVDA.
> 
> Sincerely,
> 
> Joe
> 
> 
> -----Original Message-----
> From: Colin Clark [mailto:colinbdclark at gmail.com] 
> Sent: Friday, September 13, 2013 1:28 PM
> To: Humbert, Joseph A
> Cc: Matt Clare; sakai-dev at collab.sakaiproject.org; accessibility at collab.sakaiproject.org
> Subject: Re: [WG: Accessibility] Student Project Opportunity Sakai CLE/jQuery-UI
> 
> Hi Joe,
> 
> It looks like you're trying to use the ctrl-arrow key shortcuts. As I mentioned in my previous message, there are several sets of keyboard shortcuts that ship out of the box with the Reorderer to maximize compatibility. Try the i/j/k/m keys, along with ctrl to move, as the instructions on the page suggestion. These were chosen for maximum screenreader compatibility. 
> 
> Does that work for you?
> 
> Colin
> 
> ---
> Colin Clark
> http://fluidproject.org
> 
> On 2013-09-13, at 11:39 AM, "Humbert, Joseph A" <johumber at iu.edu> wrote:
> 
>> Hi Colin,
>> 
>> How did you test NVDA with the fluid reorderer?
>> 
>> Here is a Jing video showing NVDA not working with fluid reorderer using both IE and Firefox:
>> 
>> http://screencast.com/t/NnCvfewo4W7h
>> 
>> Sincerely,
>> 
>> Joe
>> 
>> Joe Humbert, Accessibility Specialist
>> UITS Adaptive Technology and Accessibility Centers Indiana University, 
>> Indianapolis and Bloomington
>> 535 W Michigan St. IT210 F
>> Indianapolis, IN 46202
>> Office Phone: (317) 274-4378
>> johumber at iu.edu
>> http://iuadapts.Indiana.edu/
>> 
>> Hi Matt,
>> 
>> On 2013-09-10, at 4:28 PM, Matt Clare <Matt.Clare at BrockU.CA> wrote:
>> 
>>> The Sakai Accessibility Working Group is proposing that https://jira.sakaiproject.org/browse/SAK-22621 could be such a project and is offering mentoring and encouragement to any student that wants to take it on.
>>> 
>>> The Customize Tabs page of the Preferences Tool in Sakai has been less than ideal for a number release of the Sakai CLE.  Recently an effort has been made to revise the interface to be "draggable" but the solution currently in trunk based on the http://fluidproject.org/ is not robust across modern web browsers and the ARIA information it sends to screen reading software (JAWS, NVDA, Voiceover, etc.) is inaccurate and excessive/noisy and there are some conflicting and nonfunctional access keys .
>>> 
>>> A better solution could be created using jQuery.  Knowledge of the jQuery library is applicable to all modern web development, and the jQuery UI Draggable/Droppable interactions offer a solution that would address the issues identified in https://jira.sakaiproject.org/browse/SAK-22621 and emulate the new interface goals for the Customize Tabs page of the Preferences Tool. 
>> 
>> It might be worth exploring alternatives to just throwing out the baby with the bath water.
>> 
>> You probably know that the jQuery UI draggable widget doesn't ship with any accessibility features out of the box. It doesn't support keyboard navigation and doesn't include ARIA roles or properties.
>> 
>> You might not know, however, that the Fluid Reorderer provides configurable keyboard bindings. So if you're experiencing a conflict with a particular assistive technology, it's just a matter of passing a bit of extra JSON in order to support different keyboard shortcuts. The Reorderer ships out of the box with two different sets of keyboard shortcuts to minimize potential conflicts. On the JIRA ticket, Joe Humbert mentions that the ctrl+arrow keys don't work with most screen readers. How about the ctrl+i/j/k/m shortcuts that are also available by default? I just tested on the Reorderer demo here with NVDA, and it worked great:
>> 
>> http://fluidproject.org/releases/1.4/demos/reorderer/layoutReorderer/h
>> tml/layoutReorderer.html
>> 
>> In terms of the noisiness of the ARIA, perhaps someone can outline what roles and states they'd prefer? Or perhaps suggest a demonstration or alternative widget that works the way they want? It's a pretty tough interaction design problem to get this right, so I'm keen to learn about interesting alternative approaches. It might make sense to make the Reorderer's ARIA information configurable via JSON as well. This should be fairly straightforward to do, and I'm happy to lend a hand or mentor a student project for this.
>> 
>> Can you elaborate on your comment about how it is "not robust across modern web browsers?"  We test across all the major modern browsers, but sometimes issues do slip through. If there are specific bugs you're experiencing, we're happy to fix them. Just let us know.
>> 
>> Colin
>> 
>> ---
>> Colin Clark
>> http://fluidproject.org
>> _______________________________________________
>> accessibility mailing list
>> accessibility at collab.sakaiproject.org
>> http://collab.sakaiproject.org/mailman/listinfo/accessibility
>> 
>> TO UNSUBSCRIBE: send email to accessibility-unsubscribe at collab.sakaiproject.org with a subject of "unsubscribe"
>