Accessible Spinners

[Colin Clark]

Hey Steve,

On 4-Jun-09, at 2:56 PM, Steven Githens wrote:
>>
> Yeah, a progress bar, with an unknown quantity of time.
>>
>> Eli can comment on what he imagines it might take to make our  
>> Progress component support indeterminate spinning.
> I was thinking about tearning in to it since it's it's own (sub?)- 
> component now.

We haven't heard back from Eli about what he thinks, so you should  
definitely feel free to tear into it. I know the code fairly well, so  
I can walk you through it if needed.

>>> In lieue of that, what is the best way to do a spinner at the  
>>> moment?  A custom jQuery UI dialog maybe?  Also thinking about if  
>>> you only want a portion of the page to be spinnered off (like you  
>>> may want the top menus to still work).
>>
>>
>> A dialog might be a bit annoying, just because it gets in the way  
>> and will have to be dismissed.
> A while back, we started switching to jQuery dialog because it's  
> easy to control programmatically.  So what I ended up doing for this  
> small iteration was to use a jQuery dialog with a Animated GIF  
> spinner and no buttons, styled to basically not have any borders or  
> anything, and then just start and stop it using the Javascript Hooks.

That makes sense. I'm trying to think about what sort of impact this  
would have on accessibility--it's not really a modal dialog, so it's  
pretty straightforward. As long as the animated GIF spinner is in the  
tab order, has an aria role of role="progressbar", and has an  
appropriate description and label, you should be just fine.

> I know this is kind of annoying because I personally can't stand web  
> apps that won't let you go ahead an click something else until the  
> current thing is done, so maybe I can work out the timing/events  
> better to not require this.  But it's pretty fast.   We implemented  
> this to solve a performance issue on a Sakai Site with 8000 users,  
> and currently our pages load in just a few seconds on that site so  
> it's not too bad.

Great to hear that Pager's working so well for you and is so fast!

>
>> Another option might be to find a spinning progress bar plugin for  
>> jQuery out there that you like. It should be pretty straightforward  
>> to add ARIA and keyboard navigation to it. In short, it should just  
>> be a matter of giving the widget an ARIA role of "progressbar,"  
>> omitting the various value properties. Then put it in the tab  
>> order, and you should be good to go. If you find something, we can  
>> walk you through the process.
> That is a good idea.  I will try to find, even if just as an  
> exercise to learn how to make something accessible by scratch with  
> ARIA tags.

For something like that, it should be super straightforward. Just ask  
if you need a hand.

Hope this helps,

Colin

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