dragging-movements-slider

Description

The dragging-movements-slider rule requires that movable components, particularly sliders, offer an alternative mechanism for user control besides dragging.

Relying solely on dragging to set a slider’s value or move a component creates an accessibility barrier. Users who struggle with fine motor control or those who rely on specialized input devices like trackballs, head pointers, or eye-gaze systems often find precise dragging movements difficult or impossible.

You must provide an equivalent method that can be operated using only a single pointer action (a tap or a click) without requiring the dexterity necessary for a sustained drag movement.

This rule aligns with WCAG Success Criterion 2.5.7 (Dragging Movements), which mandates non-dragging alternatives for any functionality that requires a dragging movement.

Examples

In the following incorrect example, the slider relies exclusively on the user dragging the slider to set the value. This design fails to provide an accessible, single-pointer alternative.

In the following corrected example, the slider includes an accompanying numerical input field. This input field provides a single-pointer alternative, allowing users to set a precise value directly.

Another acceptable solution for dragging movements that contains a slider is ensuring that a tap or click on any point of the slider track moves the handle to that position and sets the value. This is considered a single-pointer action that replaces the dragging movement.

How to fix?

To fix violations of the dragging-movements-slider rule, implement a single-pointer alternative for setting the slider’s value or moving the component.

Choose one of the following methods:

• Enable tap/click-to-set: Implement logic that allows a user to select a value by performing a single tap or click directly on the slider track, which moves the slider to that position. This eliminates the need for the dragging movement.

• Add a numerical or text input field: Pair the slider with an <input type="number"> or <input type="text"> field.

References

• WCAG Success Criterion 2.5.7 (Dragging Movements)