Use 44px touch targets
4 min read, 3 skills
A fingertip covers roughly 40–50px on a phone screen. Controls smaller than that cause missed taps, accidental taps on the neighbour, and frustration that people blame on themselves. Apple's guidelines ask for 44pt, Material asks for 48dp, and WCAG 2.2 sets a 24px minimum.
The visible icon can stay small. Grow the hit area with padding, or with an invisible pseudo-element, so the layout doesn't change:
css.icon-button { position: relative; }
.icon-button::after {
content: "";
position: absolute;
inset: 50% auto auto 50%;
width: 44px;
height: 44px;
translate: -50% -50%;
}
Leave at least 8px between adjacent targets, and check that the pressed state shows feedback under the finger.
Skills in this chapter
Pressed Button Feedbackby UI Skillbook
Give every interactive control an immediate, physical-feeling response to a press.
Interaction
Accessible Focus Statesby UI Skillbook
Keep a visible, high-contrast focus indicator on every interactive element, without a generic browser outline or none at all.
Accessibility
Fixing Accessibilityby ibelick
Audit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
AccessibilityExternalGitHub stars: 10.4K