touch-target-design

Name: touch-target-design
Author: Owl-Listener

82stars25forks

How to install touch-target-design?

owl-listener/inclusive-design-skills/touch-target-design

$npx -y skills add Owl-Listener/inclusive-design-skills --skill touch-target-design

Installs into the current project.

Summary

Design touch targets and pointer interactions that work for people with motor difficulties, tremors, limited dexterity, or who use assistive pointing devices. Use when designing buttons, links, form controls, mobile interfaces, or any clickable/tappable elements. Triggers on: tou

Files · 1

View on GitHub

SKILL.md

1	# Touch Target Design
2
3	Design interactive elements that are large enough, spaced enough, and
4	forgiving enough for people with limited precision — whether from
5	disability, age, environment, or device.
6
7	## Minimum Sizes
8
9	### Touch (mobile, tablet)
10	- Minimum: 44×44 CSS pixels (WCAG 2.2 Level AA)
11	- Recommended: 48×48 CSS pixels (Google Material guidelines)
12	- For high-stakes or frequent-use targets: 56×56 or larger
13
14	### Pointer (desktop)
15	- Minimum: 24×24 CSS pixels (WCAG 2.2 Level AA)
16	- Recommended: 32×32 for common actions
17	- For destructive or irreversible actions: larger targets reduce errors
18
19	### Spacing Between Targets
20	- Minimum: 8px gap between adjacent interactive elements
21	- Recommended: 12–16px for frequently used elements side by side
22	- Never place destructive actions (delete) adjacent to common actions
23	(save) without spacing or visual separation
24
25	## Design Patterns
26
27	### Generous Hit Areas
28	- The tappable area can be larger than the visible element
29	- Use padding, not just the visual size of the icon or text
30	- Entire row should be tappable in list items, not just the text
31	- Link text should be descriptive enough to form a reasonable
32	tap target ("Read the full report" not "here")
33
34	### Forgiving Interactions
35	- Don't trigger actions on touch-down — trigger on touch-up
36	(this lets users slide away to cancel)
37	- For destructive actions: require a deliberate second tap or
38	confirmation, not a single tap
39	- Avoid double-tap requirements — they're unreliable for users
40	with tremors
41	- Avoid long-press as the only way to access functionality
42
43	### Spacing for Safety
44	- Separate "confirm" and "cancel" actions with distance or visual weight
45	- Place destructive actions away from common actions
46	- Group related actions together, separate unrelated actions
47	- On mobile: keep primary actions in the thumb zone (bottom half
48	of screen)
49
50	### Alternatives to Precision
51	- Provide zoom capability for complex interfaces
52	- Allow pinch-to-zoom on mobile (never disable it)
53	- For precise tasks (colour pickers, sliders): provide a text
54	input alternative
55	- Dropdown menus with many items: add search/filter
56
57	## Assessment Questions
58
59	1. Are all interactive elements at least 44×44px on touch devices?
60	2. Is there adequate spacing between adjacent targets?
61	3. Are destructive actions separated from common actions?
62	4. Can every interaction be completed without precision timing
63	or precise pointing?
64	5. Is there always an alternative to precision-dependent interactions
65	like sliders or drag-and-drop?

People who liked this also viewed

6 picks

Type

touch-target-design

82stars25forks

View on GitHub

How to install touch-target-design?

owl-listener/inclusive-design-skills/touch-target-design

$npx -y skills add Owl-Listener/inclusive-design-skills --skill touch-target-design

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Touch Target Design
2
3	Design interactive elements that are large enough, spaced enough, and
4	forgiving enough for people with limited precision — whether from
5	disability, age, environment, or device.
6
7	## Minimum Sizes
8
9	### Touch (mobile, tablet)
10	- Minimum: 44×44 CSS pixels (WCAG 2.2 Level AA)
11	- Recommended: 48×48 CSS pixels (Google Material guidelines)
12	- For high-stakes or frequent-use targets: 56×56 or larger
13
14	### Pointer (desktop)
15	- Minimum: 24×24 CSS pixels (WCAG 2.2 Level AA)
16	- Recommended: 32×32 for common actions
17	- For destructive or irreversible actions: larger targets reduce errors
18
19	### Spacing Between Targets
20	- Minimum: 8px gap between adjacent interactive elements
21	- Recommended: 12–16px for frequently used elements side by side
22	- Never place destructive actions (delete) adjacent to common actions
23	(save) without spacing or visual separation
24
25	## Design Patterns
26
27	### Generous Hit Areas
28	- The tappable area can be larger than the visible element
29	- Use padding, not just the visual size of the icon or text
30	- Entire row should be tappable in list items, not just the text
31	- Link text should be descriptive enough to form a reasonable
32	tap target ("Read the full report" not "here")
33
34	### Forgiving Interactions
35	- Don't trigger actions on touch-down — trigger on touch-up
36	(this lets users slide away to cancel)
37	- For destructive actions: require a deliberate second tap or
38	confirmation, not a single tap
39	- Avoid double-tap requirements — they're unreliable for users
40	with tremors
41	- Avoid long-press as the only way to access functionality
42
43	### Spacing for Safety
44	- Separate "confirm" and "cancel" actions with distance or visual weight
45	- Place destructive actions away from common actions
46	- Group related actions together, separate unrelated actions
47	- On mobile: keep primary actions in the thumb zone (bottom half
48	of screen)
49
50	### Alternatives to Precision
51	- Provide zoom capability for complex interfaces
52	- Allow pinch-to-zoom on mobile (never disable it)
53	- For precise tasks (colour pickers, sliders): provide a text
54	input alternative
55	- Dropdown menus with many items: add search/filter
56
57	## Assessment Questions
58
59	1. Are all interactive elements at least 44×44px on touch devices?
60	2. Is there adequate spacing between adjacent targets?
61	3. Are destructive actions separated from common actions?
62	4. Can every interaction be completed without precision timing
63	or precise pointing?
64	5. Is there always an alternative to precision-dependent interactions
65	like sliders or drag-and-drop?

People who liked this also viewed

6 picks

Type