Touch/pointer input

All functionality accessible via pointer input device

All functionality should be accessible via pointer input devices, e.g., via a mouse, a finger on a touch screen, an electronic stylus, or a laser pointer.

Write JavaScript event handlers that trigger on both keyboard and mouse click. Generally, if your controls are mouse-accessible with click events, they will be touch-accessible too.

Not all touch devices support drag and drop operations and scripted gestures. Scripted gestures won’t work at all if the user is using a screen reader on a touch device; the screen reader itself uses gestures to function and consumes any gestures before they reach the authored content. Consider both drag and drop and scripted gestures optional enhancements that supplement the main click functionality.

Some users may not be able to perform path-based or multipoint gestures using a pointer input device. Examples of path-based gestures include swiping and dragging a slider. Examples of multipoint gestures include a two-finger pinch zoom, a split tap where one finger rests on the screen and a second finger taps, or a two- or-three finger tap or swipe.

Ensure that your content can be operated without multipoint or path-based gestures. The gestures can be used so long as the functionality can also be operated via a pointer input device method, such as a tap, click, double tap, double click, long press, or click & hold.

Examples

• All functionality can be operated by a single click or tap, double tap, double click, long press, or click & hold.
• A slider allows the setting of the value of a range via a path-based gesture, i.e., by dragging the slider's thumb control to the desired position and then releasing the finger or mouse. At both ends of the slider, there are redundant buttons to decrease or increase the slider value.
• A web application supports drag and drop functionality to re-order items in a list. At the end of each list item, there is a redundant pair of icon buttons to move the item up or down the list for re-ordering.
• A web site includes a map view that supports the multi-point (two finger) pinch gesture for zooming in, and the drag gesture to move the visible area. User interface controls offer the redundant zoom operation via [+] and [-] buttons, and stepwise panning via four arrow buttons

Target size (Level AAA, optional)

The target for pointer input (e.g., mouse, pen, touch) should be large enough to easily activate, even if the user is on a small handheld touch screen device, or has limited dexterity, tremors, low vision, or large fingers.

Aim for a target size of at least 44px by 44px.

There are some exclusions:

Equivalent

The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;

Inline

The target is in a sentence or block of text;

User Agent Control

The size of the target is determined by the user agent and is not modified by the author;

Essential

A particular presentation of the target is essential to the information being conveyed.

Target size is a WCAG 2.1 Level AAA concern, so optional for the Government of Canada. We include it here because it can be easily implemented, depending on the design.

Related WCAG resources