Touch targets below 44x44 points fail WCAG 2.2 SC 2.5.5 (Target Size) and SC 2.5.8 (Target Size Minimum), exposing the app to accessibility audit failures and App Store rejection for accessibility non-compliance. Beyond compliance, undersized targets cause systematic mis-taps — users hit adjacent controls, trigger unintended navigation, or simply abandon interaction entirely. Apple HIG and Material Design both specify 44pt minimums precisely because human finger-pad contact areas average 44-57 points; anything smaller forces compensatory precision that degrades usability for all users and sharply increases error rates for users with motor impairments.
Critical because mis-taps on undersized targets trigger unintended actions and are non-recoverable without user-visible error handling, directly degrading user retention and failing mandatory accessibility standards.
Expand every interactive element to a minimum 44x44 point touch area using hitSlop or padding — without changing visual size. Audit every pressable component in your codebase against this minimum before release.
// Expand a small icon button without changing its visual footprint
<TouchableOpacity
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
onPress={handleClose}
>
<Icon name="close" size={24} />
</TouchableOpacity>
// Or use padding directly on Pressable
<Pressable style={{ padding: 10 }} onPress={handleAction}>
<Icon name="menu" size={24} />
</Pressable>
For tab bar items and header buttons, verify that the wrapping container (not just the icon) carries the target dimensions. Use React Native's onLayout during development to log rendered sizes if visual inspection is insufficient.
ID: mobile-ux-patterns.touch-gestures.touch-target-size
Severity: critical
What to look for: Count every interactive component (buttons, links, pressable areas, tab bar items) in your app. For each, enumerate its touch target dimensions from styling, padding, and hitSlop. Report: "X of Y interactive elements meet the 44pt minimum."
Pass criteria: All interactive elements (buttons, tabs, pressable items, list rows) have a minimum touch target size of 44x44 points — including padding around elements if used to expand the touch area. Report the count even on pass: "Checked N interactive components, all meet 44pt minimum."
Fail criteria: Any interactive element has a touch target smaller than 44x44 points, or touch targets are not defined and visual size is clearly below 44pt. Do NOT pass when elements rely solely on hitSlop to reach 44pt but the prop is not actually set.
Skip (N/A) when: Never — every interactive element should have adequate touch target size.
Detail on fail: Name the specific components with inadequate touch targets. Quote the actual style values found. Example: "Tab bar icons are 24x24 with no hitSlop — below 44pt minimum. Icon buttons in header are 32x32 with only 4pt padding." or "Checkbox component is 20x20 with no expanded touch area."
Cross-reference: For accessibility implications of small touch targets, the Accessibility Fundamentals audit covers touch target sizing in depth.
Remediation: iOS and Android guidelines recommend 44x44 points minimum for touch targets. Use padding or hitSlop to expand the touch area without changing visual size:
// React Native - Button with adequate touch target
<TouchableOpacity hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
<Icon size={24} />
</TouchableOpacity>
// Or with Pressable
<Pressable style={{ padding: 12 }}>
<Text>Tap me</Text>
</Pressable>