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.

For specific coding guidance, view the AccDC Technical Style Guide

ARIA Slider Demo


  • 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.