ARIA Slider Module

The ARIA Slider Module automatically transforms a DOM node into a slider control that is equally accessible to screen reader and keyboard only users.
Module files:

  1. setup.js : The setup script that converts the DOM node and configures the ARIA Slider functionality.

The packaged file for this demo can be downloaded from WhatSock.com under Downloads.

The ARIA Slider Generator has been updated to support touch draggability, scalability, horizontal and vertical sliders, auto resize readjustment, and graceful degradation for non-ARIA support.

ARIA Slider Demo

0%
⇔
100%
12AM
⇑
⇓
11PM

Instructions:

  • Mouse users can drag the slider to open or close the floating window shutter, or adjust the time.
  • 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.