Accessible Spinners

[Steven Githens]

Colin Clark wrote:
> Hey Steve,
>
> On 29-May-09, at 1:40 PM, Steven Githens wrote:
>> Are there plans for an accessible spinner, or making the progress 
>> component more generic to be used for events with an unknown time as 
>> well?
>
> No immediate plans, but it's something we can probably lend a hand with.
>
> Just to be clear, when you say Spinner, you mean an indeterminate 
> progress bar, not something like this, right?
>
> http://yelotofu.com/labs/jquery/UI/spinner/spinner.html
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.
>
>> 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.

What this is for currently, is to sort of overlay the page, so folks 
can't click on the pager until the next page is done loading.  For this 
instance of using the Fluid Pager I am doing an Ajax request to get each 
page, which is why I don't want new page changes initiated.

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.

> 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.

Megacheers,
Steve
>
> Let me know if that helps,
>
> Colin
>
> ---
> Colin Clark
> Technical Lead, Fluid Project
> Adaptive Technology Resource Centre, University of Toronto
> http://fluidproject.org
>