Menu

1 / 2

Make targets big enough to hit (Web HIG tip #12)

DEV Community: css·FrozonFreak·about 18 hours ago
#XNRAtSXn
#devtocss#devto#dev#size#target
Reading 0:00
15s threshold

Open your site on a phone and try to tap the "×" that closes a banner, the edit icon in a table row, or the second of three pagination numbers. If you hit the wrong one, or have to zoom in first, the target is too small. People with tremors, limited dexterity, or a phone in one hand on a moving bus miss it much more often.

Web HIG tip #12 (Quick #75 / HIG-A11Y-007): Interactive targets MUST be at least 24×24 CSS px. Primary touch actions SHOULD use 44×44 CSS px.

Why it matters

A target is the area that responds to a click or tap, not the icon you can see:

A 16px icon with no padding gives the finger a 16px target, even if the design looks roomy around it

Small targets packed side by side turn a miss into a wrong action: delete instead of edit, next page instead of previous

Icon-only toolbars, close buttons, table row actions, and pagination links are the usual offenders

Pointer users with tremors or limited dexterity are affected too, not only touch users

The full HIG covers this in §5.4, Target…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.