Response title
This is preview!
Make jQuery UI Slider plugin accessible
in Using jQuery Plugins
•
8 years ago
Purpose: Make the slider accessible to screen readers, keyboard only-users and non-javascript users.
Problem
We use the jQuery slider plugin on a site (http://vidensportal.servicestyrelsen.dk). With the slider you set min-age and max-age in an HTML form. The first implementation sent values to INPUT fields of type "hidden", because - well, they should be hidden.This approach presents some problems.
- First and foremost JAWS (and perhaps other screen readers) ignores these fields, and besides you can't enter values into them.
- Secondly the A tags (handles) are empty: No text and no title attribute.
- And thirdly, if you disable javascript, there is no built-in fall back - so from an accessibility point of view, you can't use the slider for important functionality.
Hey, the form related issue (#1) has nothing to do with the slider! No, not as the plugin works now. But if the idea is to make the plugin accessible (which it is in this post), we should have some form fields for the handle values - or at least prepare the plugin for this scenario.
Solutions
- We have added normal text fields instead of hidden ones. We hide them with CSS and make reverse update of the slider; so when you tab to the text fields and enter values, the slider is updated.
- We have added a title attribute to the handle's A tags.
- We made some CSS and jQuery adjustments to make the slider usable without javascript. Perhaps not the prettiest implementation, but it works.
- There is a tabbing problem in the "with-javascript" implementation. We still want the slide-with-keyboard-arrows functionality, it's actually quite nice. But then we end up with doubling the focus in the tab-index: min-age field, max-age field, min-age handle, max-age handle. There may be an obvious solution to this, please enlighten us!
- The text fields should be visible, when they receive focus. Can be accomplished with jQuery and CSS.
- Preferably there should be a SPAN with a CSS-hidden text inside the handle A tags.
Regards,
Casper Rækjær
Headnet ApS
1