Color Picker Using Slider Widgets

Change sliders to update the background color of box (note: the box is visually left of the 3 slider controls), with the HEX color value in a form control.

Red
0
Green
0
Blue
0

Keyboard Support

Key Function
Left and Up Arrow Increase slide value by increment value
Right and Down Arrow Decrease slide value by increment value
Page Up Arrow Increase slide value by jump value
Page Down Arrow Decrease slide value by jump value
Home Set slider to minimum value
End Set slider to maximum value

ARIA Roles, Properties and States

Role Property/State Component Usage
slider thumb Identify the widget as a slider
aria-valuemax thumb Maximum value of the slider
aria-valuemin thumb Minimum value of the slider
aria-valuenow thumb Current value of the slider
aria-labelledby thumb Reference to define a unique descriptive accessible name for each slider widget

AT Testing Results

Browser Browser Version Assistive Technology (AT) AT Version Result
Internet Explorer 11 JAWS 15
Firefox 36 NVDA 2105.1
Chrome Chromevox
Safari 7.14 Voice Over
  • Speaks accessible name and the percentage of slider position when thumb receives focus
  • Speaks percentage of slider position as you increase or decrease the value of the slider
GNOME Orca