jQuery UI Slider from a Select Element - now with ARIA Support
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
We’ve updated our popular jQuery UI selectToUISlider plugin with ARIA support, making the jQuery UI slider widget more accessible to users on assistive devices. The plugin uses progressive enhancement to replace an already-functional HTML select element with a jQuery UI slider control, and adds a number of features for both visual users and those on assistive technologies.
What’s This All About?
Permalink to 'What’s This All About?'Our selectToUISlider plugin uses progressive enhancement to scrape the data from a select element (or two for a range) and generate a jQuery UI Slider in its place, acting as a proxy to the select element (regardless of whether it is still visible, or hidden from the user). This means you can use the jQuery Slider plugin alongside other input elements in a form and submit or serialize the form as if the slider is not even there. It also allows the user to interact and make a choice with or without javascript, since the select element can be used if the slider is unavailable.
The plugin enhances the jQuery UI slider in many ways, adding text labels and ticks on the slider axis, and tooltips that appear while a slider is being used. In this most recent update, we’ve also added ARIA support and a tabindex to the slider, allowing it to be accessible to users on assistive technologies, such as a screen reader. More info on that below.
Working Demo:
Permalink to 'Working Demo:'The demo above was generated from 2 HTML select elements with the following jQuery call:
$('select').selectToUISlider();
Now Updated for ARIA Support!
Permalink to 'Now Updated for ARIA Support!'So what is ARIA Anyway?
Permalink to 'So what is ARIA Anyway?'WAI-ARIA, the Web Accessibility Initiative’s Accessible Rich Internet Applications Suite, is a set of specifications for applying meaningful roles to web widgets, allowing them to be accessible to assistive technologies. You can find out more about ARIA here: WAI-ARIA Overview.
How we applied ARIA to the jQuery UI Slider
Permalink to 'How we applied ARIA to the jQuery UI Slider'Following the guidelines for the slider role specified at WAI-ARIA Slider Role, this plugin now adds and manipulates the following attributes on each slider handle:
- role(slider) The ARIA role for a slider widget.
- aria-valuemin: The minimum value of the slider.
- aria-valuemax: The maximum value of the slider.
- aria-valuenow: The current value of the slider (automatically updates during slide).
- aria-valuetext: The current human-friendly value of the slider (same as tooltip, and automatically updates during slide).
- aria-labelledby: The ID of the label corresponding to the slider. We use the select element’s corresponding label. The ID is generated if it’s not in markup already.
- tabindex: tabindex=“0” is added to the slider handle, bringing it into the natural tab order of a form.
- role of “application” to the slider’s parent div: In our testing, this triggered our screenreader into the proper mode to meaningfully interact with the slider widget.
What we discovered along the way
Permalink to 'What we discovered along the way'A workaround for “aria-labelledby”
Permalink to 'A workaround for “aria-labelledby”'The ARIA spec provides the aria-labelledby attribute as a means of associating an ARIA widget with a label element on the page. By setting the value of the aria-labelledby attribute to the ID of a label, a screenreader should read that label’s text aloud and associate the ARIA widget with its purpose.
While testing on Jaws and NVDA, we noticed that the aria-labelledby attribute was not being read aloud to the user as we expected. It seemed that while using “role=application” allowed the screenreader to recognize the markup as a slider widget, it also disabled the functionality of the aria-labelledby attribute. Unfortunately, we couldn’t find a workaround, so we added a hidden span element inside each slider handle which acts in its place as a label for screenreader users. The text within the span reads “Slider control for” followed by the text contained in the form label on your page. In the case of the demo above, for instance, upon focusing on a slider handle, the screen reader will say “Slider control for Start Date”, followed by instructions for using the control with keyboard commands.
To anyone who downloaded the earlier version of this plugin: The zip contains an update to the CSS file that hides this new span element visually, so be sure to update your code.
Avoiding duplicate controls for screenreader users
Permalink to 'Avoiding duplicate controls for screenreader users'Now that this slider component is fairly accessible on its own, we found
that, while it might be useful for a sighted user to see both the
selects and the slider on the page and see them interacting with one
another, it may lead to a confusing experience to screenreader users to
have duplicate controls on the page that do the same thing. To work
around this problem, we think it’s best to hide the original select
element from all users (screenreader users too) by styling it with
display: none; once the slider has been generated. You can either hide
the select by adding a class to it and creating a style in your CSS for
it, or by simply adding a call to the .hide(); method to the end of
your selectToUISlider(); call, as shown below:
$('select').selectToUISlider().hide();
The hidden select menu will still be able to store the value of the slider, so you can submit your form as if the slider was never there.
Don’t want to hide the select element? If you can not hide the select element from the interface, perhaps you could provide some text for all users instructing that they can use either the select menu or the slider to accomplish the task at hand.
Using this plugin
Permalink to 'Using this plugin'To use this widget, you’ll need to include jQuery version 1.3+, and the jQuery UI 1.7+ Slider plugin (which requires jQuery UI Core as well). You can get all of the necessary code through the zip provided below.
The following code example demonstrates the basic way to use this plugin:
HTML
Permalink to 'HTML'<select name="speed" id="speed">
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Med" selected="selected">Med</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
JavaScript
Permalink to 'JavaScript'$('select').selectToUISlider();
The following demo shows the result of the code above:
Developer Options
Permalink to 'Developer Options'The following options are available in this plugin:
- labels: Number, number of labels to show. Labels are shown in even distribution from the center of the slider. Default is 3.
- tooltip: Boolean, show tooltips or not. Default is true.
- tooltipSrc: Specific String, tooltip text source from select menu. Available values are “value” or “text”. Default is “text”.
- labelSrc: Specific String, scale label text source from select menu. Available values are “value” or “text”. Default is “value”.
- sliderOptions: Object, accepts native jQuery UI slider options. **Note:**This plugin generates some of the native slider options. For the plugin to work as shown, do not override these options: step, min, max, range, slide, and values.
ThemeRoller-Ready
Permalink to 'ThemeRoller-Ready'
Just like the jQuery UI slider widget, this plugin is ThemeRoller-ready,
allowing it to be easily skinned to match your website’s design. You can
design and download a theme for this widget at
ThemeRoller.com.
Download This Code
Permalink to 'Download This Code'Version 2.0: FilamentGroup_selectToUISlider.zip
Your thoughts?
Permalink to 'Your thoughts?'We’d love to hear what you think of this plugin and any suggestions you have for how it could be improved. These progressive enhancement features will eventually be rolled into the jQuery UI slider itself. You can track its progress at the jQuery UI Planning Wiki (Slider planning page), or better, post feedback or share your own ideas about the jQuery UI planning process by joining the development and planning wiki.