Accessible Unobtrusive “Slider/HTML5 range polyfill tooltip” Demo

Accessibility enhancements: Keyboard Controls

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.

Quick demo

The CSS file uses generated content to create the tooltip (by styling the drag handles :before and :after pseudo elements) and the value of the aria-valuetext attribute, which is dynamically set by the script, to generate the tooltip content.

Remember, this is an experiment. It will only work in browsers that support positioning generated content (so no Internet Explorer).

HTML5 input type="range" polyfill tooltip test

When the window.onload event fires, the following input elements will be automatically converted into sliders only if the browser does not recognise the HTML5 “range” state.

Javascript slider initialisation tooltip tests

Testing the tooltip display with the three different forms of drag handle animation, timed, jump & tween and also the use of the aria-valuetext property. Please note, sliders have to have the forceValue parameter set to true for the aria-valuetext property to be assigned a value at all times.

The following slider has been associated with a <select>.