WebAIM - Web Accessibility In Mind

E-mail List Archives

An ARIA slider example that supports graceful degradation

for

From: Bryan Garaventa
Date: Dec 7, 2011 11:12PM

When I saw the post a couple of days ago about Google sliders not supporting backwards compatibility with
non-ARIA equipped screen readers, I thought this might be a good experiment for implementing an ARIA slider that includes graceful degradation.

The demo is at
http://whatsock.com/modules/aria_slider_module/demo.htm

Instructions:
. Mouse users can drag the slider to rotate the bubble image by 360 degrees.
. Keyboard only users can tab to the slider and:
1. Press the Left/Right arrow keys to move the slider in increments of 1;
2. Press the End/Home keys to move to the first or last value;
3. Press the PageUp/PageDown keys to move the slider in increments of 10%.
. Users of screen readers that support ARIA can Arrow or Tab to the slider, press Enter or Spacebar to activate it, then use all of the above key commands as well.
. Users of screen readers that don't support ARIA can Arrow to and activate the link "Open Manual Slider", and use a traditional selector instead to manually move the slider control.

Bryan