Accessible Unobtrusive Slider Demo

Accessibility Enhancements (ARIA)

Whenever a slider has focus, the keys ←, →, ↑, ↓, Ins and Del can be used to control the slider handle (pressing either the Page up or Page down keys or CTRL and an arrow key will move the handle by two steps at a time), the Home key to set the slider at it’s minimum value and the End key to set the slider at it’s maximum value.

The script automatically assigns each slider the required ARIA role of “slider” and states “valuemax”, “valuemin”, “valuetext” and “valuenow”.

Should an element with an id of fd_slider_describedby exist, this is used to set the ARIA “describedby” relationship. Additionally, should the sliders associated form element itself have an associated label, this label is used to set the ARIA “labelledby” relationship.

View the JavaScript source or read the related article.

fdSliderController.increment test

The following slider has been created from a select list. A simple callback function buttonManager.createButtons has been defined that creates the buttons to the left and right of the slider. These buttons, when activated, increment and decrement the slider’s handle by calling the fdSliderController.increment method.

Another callback function updateLabel has been defined that updates the input’s associated label with the current slider value.

View the page source to see the callback functions.


class="fd_slider_cb_create_buttonManager-createButtons 
       fd_slider_cb_create_updateLabel 
       fd_slider_cb_update_updateLabel 
       fd_slider_cn_halfSize 
       fd_hide_input"

Don’t forget folks

The rather nice png images and styles for the black sliders were located at schillmania. Go visit…