This article first appeared in issue 229 of .net magazine – the world's best-selling magazine for web designers and developers.
Until HTML5 support in browsers and assistive technologies (ATs) reach critical mass, there’s a good chance that UI widgets will still need to be created with the building blocks of HTML4.
A slider is one example. It’s a control enabling a value to be chosen from a predefined range. Uses include setting a volume level or rating a product.
HTML5 makes it simple to create a slider using the <input> element, with type="range".
<input type="range" min="-10" max="10" step="2" value="0">
This creates a control that can be used to set the element’s value. The min and max attributes define the lower and upper limits of the range and the step attribute describes the increments that can be selected between the two. With a little CSS and some JavaScript, that’s all there is to creating a slider in HTML5.
Here’s the catch though. Browser support for <input type="range"> is sketchy, and AT support is completely non existent.
At the time of writing neither Firefox nor IE has implemented support for <input type="range"> (on Windows or Mac OS). Opera has done so for both platforms, but doesn’t make it available through its accessibility APIs. Only Chrome (on Windows) and Safari (on Mac OS) have implemented support for <input type="track"> and made that information available to ATs through their accessibility APIs.
This means there are still times when a DIY slider might be called for. One method is to use a link to create the focusable marker that moves up and down the slider. The link text represents the currently selected value.
<div id="rail"><a href="#" id="marker"><span>0</span></a></div>
A background image can be used to create the look and feel of a slider rail, with JavaScript to make the interaction work (for mouse and keyboard).
The trouble is that ATs don’t recognise this as a single widget; they see a collection of separate HTML elements. This is where ARIA comes in.
<a href="#" id="marker" role="slider" ariavaluemin="- 10" aria-valuemax="10" ariavaluenow=" 0" aria-valuetext="0"><span>0</ span></a>
The ARIA bridges the gap between the HTML and the functionality in a way ATs can understand: role="slider" tells the AT to interpret the element as a slider, and the aria-valuemin and aria-valuemax attributes set lower and upper limits on its range.
The slider’s currently selected value is defined by the aria-valuenow attribute. The aria-valuetext attribute is optional, and is used to define a more user-friendly version of the slider’s current value. For example, if the purpose of the slider was volume control, the aria-valuenow attribute might be 5 and the aria-valuetext 5%.
When JS is added to create the interaction, it’s a good idea to build in extra keyboard accessibility: arrow keys to move in single increments, Page Up and Page Down to move in larger increments and Home and End to move to the upper and lower limits of the slider.
Discover 101 CSS and Javascript tutorials at our sister site, Creative Bloq.
