jQuery slider & ARIA support

493 views
Skip to first unread message

radioco...@gmail.com

unread,
Jul 28, 2009, 5:42:44 PM7/28/09
to jQuery Accessibility, Michelle D'Souza
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

Michelle D

unread,
Jul 30, 2009, 9:05:04 AM7/30/09
to jQuery Accessibility
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"
<radiocontrol...@gmail.com> wrote:
> 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/UIOp...

Alison Benjamin

unread,
Jul 30, 2009, 11:25:55 AM7/30/09
to jquer...@googlegroups.com
Hi,

> Can you explain why you changed the generated node from an anchor to a
> div?

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?


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

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

Scott González

unread,
Aug 2, 2009, 3:29:22 PM8/2/09
to jquer...@googlegroups.com
Hey Alison,

I just took a look at the patch and I see two problems.  The first problem is that the aria-valuenow property never gets updated.  I've confirmed this with the demo using firebug.  The tests that were written for this are actually testing the value method, not the aria-valuenow attribute.  The second problem is that the patch doesn't account for multi-handle sliders.  Let me know if you need any more information or help.

Scott González

unread,
Aug 2, 2009, 3:32:01 PM8/2/09
to jquer...@googlegroups.com

Scott González

unread,
Aug 4, 2009, 7:24:54 PM8/4/09
to jquer...@googlegroups.com
2009/8/2 Scott González <scott.g...@gmail.com>

The second problem is that the patch doesn't account for multi-handle sliders.

This may actually not be a problem.  I forgot that the handles can cross over each other in our multi-handle sliders, so all handles have the same min and max.

Alison Benjamin

unread,
Aug 5, 2009, 10:49:37 AM8/5/09
to jquer...@googlegroups.com
Hi Scott,

Thanks for taking the time to look at my patch.

> The first problem
> is that the aria-valuenow property never gets updated. I've confirmed this
> with the demo using firebug.

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.

> The tests that were written for this are
> actually testing the value method, not the aria-valuenow attribute.

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

Scott González

unread,
Aug 5, 2009, 2:20:38 PM8/5/09
to jquer...@googlegroups.com
On Wed, Aug 5, 2009 at 10:49 AM, Alison Benjamin <radioco...@gmail.com> wrote:
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.

I was using firebug's inspection to check for aria-valuenow changes, so I may have been experiencing the same problem you've had before.  I'll test again by actually checking the attribures instead of using the inspector.  The updated tests should also prove that it's working.

Alison Benjamin

unread,
Sep 11, 2009, 5:26:00 PM9/11/09
to jquer...@googlegroups.com, Michelle D'Souza
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

jQuerySliderAria.txt
sliderUnitTests.txt

Scott González

unread,
Sep 11, 2009, 7:31:38 PM9/11/09
to jquer...@googlegroups.com
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

Alison Benjamin

unread,
Dec 4, 2009, 1:38:43 PM12/4/09
to jquer...@googlegroups.com, Michelle D'Souza
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




2009/9/11 Scott González <scott.g...@gmail.com>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery Accessibility" group.
To post to this group, send email to jquer...@googlegroups.com
To unsubscribe from this group, send email to jquery-a11y...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-a11y?hl=en
-~----------~----~----~----~------~----~------~--~---


Reply all
Reply to author
Forward
0 new messages