Bug 86: Custom Slider Without Keyboard Support (F42)

WCAG 2.1.1 (Keyboard) + 4.1.2 (Name, Role, Value) | Custom slider only works with mouse.

Failure F42: Mouse-Only Slider (No Keyboard)
0% 50% 100%
Current: 45%

Issues:

  • Slider is div, not semantic input[type="range"]
  • No keyboard support (arrow keys don't work)
  • No role="slider" ARIA
  • No aria-valuemin, aria-valuemax, aria-valuenow
  • No aria-label describing what it controls
  • Keyboard users cannot use this control
Failure F42: Slider Not Focusable

Issue: Slider not focusable (no tabindex, no semantic input role). Keyboard users can't reach it.

Failure F42: Range Slider with No Keyboard Nav
Min: $200
Max: $800

Issues:

  • Two sliders, no relationship indicated
  • Neither has ARIA roles/attributes
  • No keyboard navigation between them
  • No aria-label distinguishing min vs max
Better Approach (For Reference)
<!-- BETTER: Native input range with fallback --> <label for="volume">Volume:</label> <input type="range" id="volume" min="0" max="100" value="45" aria-label="Volume control" aria-describedby="volume-hint"> <span id="volume-hint">Use arrow keys to adjust</span> <!-- OR Custom with full ARIA: --> <div role="slider" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="45" tabindex="0"> </div> <!-- JavaScript must handle: Arrow keys, Page Up/Down, Home/End -->
HAL Fixes: HAL replaces custom sliders with native input[type="range"] when possible. For custom sliders, HAL adds role="slider", aria-valuemin, aria-valuemax, aria-valuenow, aria-label. HAL adds keyboard handlers (arrow keys, Home, End, Page Up/Down). HAL ensures slider is focusable (tabindex="0").