Quick jQuery UI Accessibility Assessment
Scott González
* Date Picker
+ Would be nice if you could both hide the calendar and add a day dropdown
list. This is much easier to deal with via screen reader. You'd then
have three dropdowns: day, month, and year. They should appear adjacent to
each other in the HTML (one tab away from one another). Maybe even consider
putting them inside a fieldset with legend (yet another option?).
+ The calendar does not seem to be represented via an HTML table. I'd
suggest this as the default presentation. Alternative presentations would be
a div with appropriate ARIA markup to make it look like a grid to the screen
reader.
* Selectable
+ How to select via the keyboard (says its possible on the demo page)? I
guess the other catch here is how to know when something is selected.
Again, dropdown lists are much easier to deal with for screen readers, and
can be made multiselectable; perhaps an option to generate one.
* dialog
I guess I think of a dialog having default ok and cancel buttons.
In the demo on this page, focus is completely lost when I try and tab around
in the dialog:
http://docs.jquery.com/UI/Dialog
* Slider
My screen reader sees it as a javascript link read as Void 0 or some such
nonsense. Where's the aria markup:
http://docs.jquery.com/UI/Slider
* Tabbed interface
http://docs.jquery.com/UI/Tabs
Seems to work ok. Would be nice if current tab could be marked somhow and
the addition of ARIA markup would cause the screen reader to recognize parts
of the interface correctly; now its just a list with text following it. This
works and is functional.
Todd Parker
interested to see what you think of the one we put together at
Filament that took the slider and added progressive enhancement and
ARIA. It was our first attempt at ARIA so be kind:
http://www.filamentgroup.com/lab/progressive_enhancement_convert_select_box_to_accessible_jquery_ui_slider/
BTW - all this testing is great! I'd like to have you start adding
your list of accessibility issues to each widget definition page for
any existing widgets. I created a simple outline here for a datepicker
widget as an example (feel free to complete edit any of this):
http://docs.jquery.com/UI/Planning/Datepicker
As you can see, we have a lot of widgets to spec out:
http://docs.jquery.com/UI/Planning
Colin Clark
Thanks for these test results, this is very helpful. A comment below...
On 15-Oct-08, at 8:12 PM, Scott González wrote:
> * Tabbed interface
> http://docs.jquery.com/UI/Tabs
>
> Seems to work ok. Would be nice if current tab could be marked
> somhow and
> the addition of ARIA markup would cause the screen reader to
> recognize parts
> of the interface correctly; now its just a list with text following
> it. This
> works and is functional.
I put together an example of adding ARIA and arrow-key navigation to
the jQuery UI Tabs widget. Do you want to give this a spin and compare
the results?
Colin
---
Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto
http://fluidproject.org
Rich Caloggero
Can we do this kind of thing for other widgit types? I.e., the date picker
for instance -- the screen reader user would find three select boxes just
fine for this. The sighted user might want something different. Using
Filament's approach, we can use the three selects by default and create
whatever we want from that representation.
The question I have is: does this go against the spirit of ARIA on some
level? ARIA claims to solve the problem by telling the assistive technology
that "this mess of HTML is one atomic object called a slider", and using
this role attribute and some code for adding keyboard behavior (which you
don't get for free), we should be able to accomplish the same thing. Of
course, this depends on the platform implementing aria fully and correctly,
as well as the assistive technology implementing it completely. The latter
is definately not the case today.
The advantages to the Filament approach is that it should work right now
with any browser and assistive technology/screen reader, and you get
keyboard control for free. So, does it make sense to do this for other
widgit types, or wait for ARIA?
Just my two cents...
-- Rich