Léonie Watson of Nomensa explains how DIY widgets can still play a significant role in overcoming barriers to accessibility
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">
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>
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.