# Touch Targets and Pointer Input

Minimum target size, pointer gestures, pointer cancellation, motion actuation, dragging alternatives.

## Criteria

| Standard | Criteria                                                                                                                                              |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| WCAG 2.2 | 2.5.1 Pointer Gestures (A), 2.5.2 Pointer Cancellation (A), 2.5.4 Motion Actuation (A), 2.5.7 Dragging Movements (AA), 2.5.8 Target Size Minimum (AA) |
| RGAA 4.1 | 13.10 Complex gestures, 13.11 Pointer cancellation, 13.12 Motion actuation                                                                            |

### Pointer Gestures — WCAG 2.5.1 (A) / RGAA 13.10

Multi-point or path-based gestures must have single-pointer alternatives. Example: pinch-zoom also available via +/- buttons.

### Pointer Cancellation — WCAG 2.5.2 (A) / RGAA 13.11

For single-pointer operations: no down-event execution, OR abort/undo available, OR up-event reverses. Use `click` not `mousedown`.

### Motion Actuation — WCAG 2.5.4 (A) / RGAA 13.12

Motion-triggered functionality (shake, tilt) must be disableable and operable via UI controls. Example: shake-to-undo also available via button.

### Dragging Movements — WCAG 2.5.7 (AA)

Drag operations must have single-pointer alternatives (buttons, dropdown select).

### Target Size Minimum — WCAG 2.5.8 (AA)

Touch targets minimum **24x24 CSS pixels**. Recommended: **44x44px**. Exceptions: undersized target with 24px spacing to other targets, equivalent larger control available, inline targets in text, user agent-controlled size, essential presentation.

### RGAA 13.10 — Complex gesture alternatives (Level A)

Can functionalities available via complex gestures also be available via simple gestures?

#### Test 13.10.1 — Multi-point contact has single-point alternative

Is each functionality available via multi-point touch contact also available via single-point contact?

Methodology:

1. Find functionalities available via multi-point touch interaction in the document.
2. For each functionality, verify it remains available via single-point touch contact (e.g., swiping left/right through a list must also be available via "previous"/"next" buttons; pinch-to-zoom must also be available via "+"/"−" buttons).
3. If so for each multi-point functionality, the test is validated.

#### Test 13.10.2 — Path-based gesture has single-point alternative

Is each functionality available via path-based screen gesture also available via single-point contact?

Methodology:

1. Find functionalities available via touch interaction requiring following a trajectory on screen.
2. For each functionality, verify it remains available via single-point touch contact (e.g., drawing a password pattern on a virtual keyboard must also be available via successive key presses).
3. If so for each path-based functionality, the test is validated.

#### Cas particuliers

- The criterion applies only to author-implemented functionalities, not user agent or OS gestures.
- The criterion does not apply when a complex gesture is essential to the functionality (e.g., drawing a signature).

### RGAA 13.11 — Pointer cancellation (Level A)

Can actions triggered via single-point pointer be cancelled?

#### Test 13.11.1 — Single-point pointer actions support cancellation

Do actions triggered via single-point pointer meet one of these conditions?

- Action is triggered on pointer release (up-event);
- Action is triggered on pointer press (down-event) then cancelled on release;
- A mechanism is available to abort (before completion) or undo (after completion) the action.

Methodology:

1. Find actions triggered via single-point pointer in the document.
2. For each action, verify that:
   - Either the action triggers on pointer release;
   - Either the action triggers on press then cancels on release;
   - Either a mechanism exists to abort or undo (e.g., in drag-and-drop, releasing outside the target zone abandons the interaction; after drop, a confirmation dialog lets the user cancel).
3. If so for each pointer action, the test is validated.

#### Cas particuliers

When the functionality requires the expected behavior to occur on a down-event (e.g., a keyboard emulator whose keys must activate on press like a physical keyboard), the criterion is not applicable.

#### Notes techniques

Two examples of cancel/abort mechanisms:

- A modal dialog allowing undo after action completion;
- For drag-and-drop, abandoning the action if the user releases outside the target zone.

### RGAA 13.12 — Motion actuation alternatives (Level A)

Can functionalities triggered by device motion be satisfied alternatively?

#### Test 13.12.1 — Device motion functionalities have UI control alternatives

Can functionalities available by moving the device be accomplished via UI components?

Methodology:

1. Find functionalities available by moving the device.
2. For each functionality, verify it can be accomplished via UI components.
3. If so for each motion functionality, the test is validated.

#### Test 13.12.2 — Gesture-toward-device functionalities have UI control alternatives

Can functionalities available by gesturing toward the device be accomplished via UI components?

Methodology:

1. Find functionalities available by gesturing toward the device.
2. For each functionality, verify it can be accomplished via UI components.
3. If so for each gesture functionality, the test is validated.

#### Test 13.12.3 — Motion detection can be disabled

Can the user disable motion detection to prevent accidental triggering?

Methodology:

1. Find functionalities available by moving the device.
2. Verify the user can disable motion detection.
3. If so, verify each functionality cannot be accidentally triggered.
4. If so for each motion functionality, the test is validated.

#### Cas particuliers

- Motion is essential to the functionality (e.g., pedometer);
- Motion detection is used to control a functionality through an accessibility-compatible interface.

## Patterns

```html
<!-- BAD: icon-only button with no padding -->
<button>
	<svg class="w-16 h-16">...</svg>
</button>

<!-- GOOD: padded to meet minimum target size -->
<button class="w-44 h-44 p-28">
	<svg class="w-16 h-16" aria-hidden="true">...</svg>
	<span class="sr-only">Close</span>
</button>
```

**Drag alternative:**

```html
<!-- Drag to reorder -->
<li draggable="true">Item 1</li>
<!-- Alternative: Up/Down buttons -->
<button aria-label="Move item up">↑</button>
<button aria-label="Move item down">↓</button>
```

Use padding to increase hit area without increasing visual size.
