Owl Listener Touch Target Design
Design interactive elements that are large enough, spaced enough, and forgiving enough for people with limited precision — whether from disability, age, environment, or device.
Minimum Sizes
Touch (mobile, tablet)
- Minimum: 44×44 CSS pixels (WCAG 2.2 Level AA)
- Recommended: 48×48 CSS pixels (Google Material guidelines)
- For high-stakes or frequent-use targets: 56×56 or larger
Pointer (desktop)
- Minimum: 24×24 CSS pixels (WCAG 2.2 Level AA)
- Recommended: 32×32 for common actions
- For destructive or irreversible actions: larger targets reduce errors
Spacing Between Targets
- Minimum: 8px gap between adjacent interactive elements
- Recommended: 12–16px for frequently used elements side by side
- Never place destructive actions (delete) adjacent to common actions (save) without spacing or visual separation
Design Patterns
Generous Hit Areas
- The tappable area can be larger than the visible element
- Use padding, not just the visual size of the icon or text
- Entire row should be tappable in list items, not just the text
- Link text should be descriptive enough to form a reasonable tap target ("Read the full report" not "here")
Forgiving Interactions
- Don't trigger actions on touch-down — trigger on touch-up (this lets users slide away to cancel)
- For destructive actions: require a deliberate second tap or confirmation, not a single tap
- Avoid double-tap requirements — they're unreliable for users with tremors
- Avoid long-press as the only way to access functionality
Spacing for Safety
- Separate "confirm" and "cancel" actions with distance or visual weight
- Place destructive actions away from common actions
- Group related actions together, separate unrelated actions
- On mobile: keep primary actions in the thumb zone (bottom half of screen)
Alternatives to Precision
- Provide zoom capability for complex interfaces
- Allow pinch-to-zoom on mobile (never disable it)
- For precise tasks (colour pickers, sliders): provide a text input alternative
- Dropdown menus with many items: add search/filter
Assessment Questions
- Are all interactive elements at least 44×44px on touch devices?
- Is there adequate spacing between adjacent targets?
- Are destructive actions separated from common actions?
- Can every interaction be completed without precision timing or precise pointing?
- Is there always an alternative to precision-dependent interactions like sliders or drag-and-drop?