Technique G216:Providing single point activation for a control slider

Applicability

Any technology that supports pointer input (e.g. supporting any or all of the following: mouse pointer, touch on touch screen or trackpad, stylus input, or laser pointer input).

This technique relates to 2.5.1: Pointer Gestures (Sufficient).

Description

The objective of this technique is to ensure that users who have difficulties performing path-based gestures can operate a control slider. A control slider is a track with a "thumb" that you move along the track to set a value.

It allows a user to set a value in a certain range, e.g. setting the volume, changing the hue value of a color, putting in the amount of money needed in a loan calculator, or picking a sum to be donated to a charity. A slider that requires path-based gestures would use swiping left or right to change the value, or dragging the thumb of the slider in a specific direction to change the value.

A simple fallback for activation without a path-based gesture is to make the control slider track clickable. This way, a value can be specified using a single tap or click on the track.

Providing controls (e.g., arrow buttons) as alternative also allows incrementing or decrementing the value with taps or clicks. This can allow for a more fine-grained setting of the value.

On touch screen devices, author-supplied path-based gestures usually do not work when an OS level Assistive Technology (AT) like a built-in screenreader are turned on. This is because AT generally consumes path-based gestures so they would not reach the authored content. When custom controls are built on top of native controls, however, these may also be operable with AT gestures such as vertical swiping to change the value (see example 1).

Examples

A custom control slider built on top of a native slider (input type range) allows users to swipe left and right or drag the slider thumb to change the value of the slider. The slider track allows tapping or clicking to set the slider thumb to the activated position. Standard buttons on either side allow for incrementing and decrementing the slider value by tap, click or keyboard activation.

Working example of custom control slider

Tests