WebAIM - Web Accessibility In Mind

E-mail List Archives

The ARIA Slider Generator has been updated to support touch draggability, scalability, horizontal and vertical sliders, and graceful degradation.

for

From: Bryan Garaventa
Date: Sep 17, 2012 1:27AM

The ARIA Slider Generator has been updated to provide a scalable solution
for dynamic ARIA slider creation in PC and mobile platforms.

The live demo, including horizontal and vertical ARIA sliders, is available
at:
http://whatsock.com/modules/aria_slider_module/demo.htm

This functionality overlaps the recent release of AccDC 2.0.2, documented at
http://lnkd.in/cuEh4W
which includes automatic touch drag and drop support and additional
features.

So here's the cool stuff...

For sighted mobile device users, just put your finger on the slider and
slide. E.G iPhone/iPad/Android.

Here's the clever bit, since Voiceover doesn't play nicely with ARIA sliders
(single or double tapping, sliding, won't slide), graceful degradation is
used to include a hidden link (named within the setSlider config object
above), which appears near the slider control.

Simply tap this link to generate a select overlay (popup control), which you
can then tap to open a select swiper control. Then swipe one finger up or
down to adjust the slider, and tap 'Done' to set the slider!

The HTML syntax for making the first slider in the demo is as follows:

<div class="slider clearfix">
<div class="min">
<span>0%</span>
</div>
<div class="slide clearfix">
<div class="nub" id="handle">
<span>&#8660;</span>
</div>
</div>
<div class="max">
<span>100%</span>
</div>
</div>

CSS is used for the styling obviously.

So here is the JavaScript for making this into a fully accessible ARIA
slider:

setSlider('handle',
{
// Hidden role for screen reader users
role : 'Slider',
min : 0,
max : 100,
// Starting val
now : 0,
// Specify the direction, optional, false by default
vertical : false,
// The hidden label for graceful degradation
degradeLbl : 'Set window percentage',
// Return the text to be used as the ARIA label
ariaLabel : function(dc){
return 'Min 0, Max 100, Currently ';
},
// Set drag functionality
onDrag : function(ev, dd, dc, val){
// Do something, 'val' reflects the newly changed value
},
// Return the text that updates the aria-valuetext attribute, announced by
screen readers
valueText : function(dc, val){
return val + '%';
},
// Set a classname for the draggable AccDC Object
className : 'nub'
}
);

And that's it!

It's quite simple, and very powerful. You can see the full source code in
the JS file at
http://whatsock.com/modules/aria_slider_module/js/setup.js
where each slider demo is configured.

CSS can be used to make the sliders look like whatever you wish, and the
values can be changed to fit any implementation requirement. E.G Volume
controls, time or date pickers, monetary adjusters, dynamic font sizing,
track length controls, and so on.

The updated ARIA Slider source code has been added to the 'modules' folder
in the AccDC archive package at
http://whatsock.com/files/downloads/AccDC_API.zip

Sincerely,
Bryan Garaventa