jQuery slider & ARIA support

Hello,

I'm apart of the Fluid community (http://fluidproject.org). One of our
components, UI Options, uses a jQuery slider. There is a demo of this
component in action here: http://build.fluidproject.org/infusion/components/uiOptions/html/UIOptions.html

In our own code, we added ARIA support (valuenow, valuemin, valuemax,
role: slider) to the slider handle to improve its accessibility. We
wanted to share the changes we made with jQuery, so we created a patch
to the jQuery slider code.

It is attached to our Fluid issue: http://issues.fluidproject.org/browse/FLUID-3011

You can download the patch here:
http://issues.fluidproject.org/secure/attachment/10693/FLUID-3011d.txt

Thanks,

Alison

Hi Alison,

Thanks for making and posting this patch!

Can you explain why you changed the generated node from an anchor to a
div? The other changes in the patch are quite self explanatory -
adding the correct aria role and properties for the slider.

Also, what was the difference when testing with a screen reader prior
and post patch?

Thanks,

Michelle

On Jul 28, 5:42 pm, "alison.benja...@gmail.com"
> component in action here:http://build.fluidproject.org/infusion/components/uiOptions/html/UIOp...

Hi,
My testing environment was JAWS 10 and FF3, which both support ARIA.
Actually, I just attached a new patch that reverses that change.

http://issues.fluidproject.org/secure/attachment/10694/FLUID-3011e.txt

Here is the background to why I made the change to a div. In our UI
options component, we added ARIA support to the handle of the jQuery
slider in our code. I found that after doing this, when the handle of
the slider receives focus, JAWS will read the URL of the site the
slider. But today, I can't replicate that problem and I don't know why
that is.

In jquery ui.slider.js, why is an anchor appended to the handle of the
slider? Is this to give it keyboard focus?
The current slider, as demonstrated here
http://jqueryui.com/demos/slider/ reads "# link" when it receives
focus from JAWS. The slider is unusable to this screen reader as
there's no way to know what the current value of the slider is or how
to change the value of the slider.

Post patch, on focus JAWS reads "trackbar". When you press enter and
go into JAWS Forms Mode, when the arrow keys are used to move the
handle, you can now hear the value of the slider at any given point,
e.g. "6 percent".

Additional ARIA properties (e.g. labelled-by and valuetext) could be
added to make the slider more meaningful to a blind user. Since a
widget's use depends on the context in which it is deployed (changing
a font size? changing a percent value?) it may be best if a web site
author adds these properties so the widget can be customized
appropriately.

I hope this is helpful.

Thanks,
Alison

Hey Alison,

http://dev.jqueryui.com/ticket/4739

Hi Scott,

Thanks for taking the time to look at my patch.
I am assuming that aria-valuenow is updating, because I can hear value
changes using JAWS (demo version 10.0.1142 on FF3 on XP). I can also
see the aria-valuenow updating when I inspect with my firebug (1.3.2)
and using the console. In the past I've experienced problems with
firebug checking aria-valuenow using inspect. I am using the slider
demos in the jQuery trunk. I'm not sure how to replicate the problem
you're having.
Thanks for pointing this out. I've attached a new patch that fixes
this problem with the unit tests.

http://issues.fluidproject.org/secure/attachment/10698/FLUID-3011f.txt

WRT to the single handle issue, I addressed it because we were using
this kind of slider in our code. I'll take a look at the two handles
and see what I can do.

Thanks Scott.
Alison



2009/8/4 Scott González <scott.g...@gmail.com>:

Hi,

I've updated our patch that adds aria support to the slider.
Specifically,  support for multi-handled sliders is added; included
some unit tests for this. I checked our results with NVDA and JAWS.

What we haven't included is a way for people to add aria-valuetext to
a slider. Aria-valuetext can be very important: it gives aria-valuenow
a human readible value that's meaningful. For example, on a slider
that was a thermostat, a screen reader user should hear with every
step that the value is also a degree Celcius. This could be an option
that people could specify when people add the widget to their code;
where aria-valuenow is set, aria-valuetext that people specify as an
option would be tacked on. This could have internationalization
implications though depending on the way we code this. After
aria-valuenow is set,  a .attr line such as "aria-valuetext", val + "
" + this.options.unittext might not be good for nonenglish speakers if
they read from right to left. Please advise if there any jQuery string
templates we should follow or other things to consider.

Thanks,
Alison

Thanks Alison. I'll take a look at the patch next week (at the jQuery
conference right now). I think support for text should be left up to
the user. I'll put together an example of this and try to make it
generic so it can be easily applied to sliders.

On Friday, September 11, 2009, Alison Benjamin

Hello,

I have updated a patch (for 1.7.2 ) that adds aria-valuenow to the jquery slider. This works with multi-handled sliders:
http://issues.fluidproject.org/secure/attachment/10816/FLUID-3011g.txt

I also created a way to add aria-valuetext by creating an additional default of unittext. by defaultt it is null, but unittext can be set to a string which becomes the aria-valuetext of the slider handle.
http://issues.fluidproject.org/secure/attachment/10814/FLUID-3011h.txt

I think aria-valuetext is a good enhancement to the usability of the slider for a screen reader user. For example, when JAWS 10+ focuses and moves the slider handle, the value of the handle is read, plus "percent". If the slider was being used as a thermometer, and "percent" was read after the value, the end user would probably find that odd.

This is the ticket for the work I have been doing:
http://issues.fluidproject.org/browse/FLUID-3011

Thanks,
Alison B