G216: Providing single point activation for a control slider | WAI | W3C Skip to content

Technique G216:Providing single point activation for a control slider

About this Technique

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

This technique applies to 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).

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.

A horizontal line with a round button halfway along the line, labelled volume.
Screenshot of an example control slider showing the thumb in the middle of the track.

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.

Note

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

Example

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

Procedure

For each control slider that responds to path-based gestures:

  1. Check that the value of the control slider (range) can be set with a tap or click using a pointer.

Expected Results

  • Check #1 is true
Back to Top