PatternFebruary 20, 20253 min read

Touch Targets & Mobile Accessibility

Designing for fat fingers and small screens. WCAG requirements for target size (44x44 CSS pixels).

The Mechanics of Touch

Unlike mouse cursors, fingers obscure the target they press.

Recommends a target size of at least 44 by 44 CSS pixels.

You can have a small visual icon but a large hit area using padding or pseudo-elements.

.icon-btn {
  width: 24px;
  height: 24px;
  padding: 10px; /* extends hit area to 44px */
  box-sizing: content-box;
}

If targets are small, ensure there is enough spacing between them so users don't accidentally tap the wrong actionable item.

Create a Core Scanner workspace and compare these patterns against your real pages to prioritize the next remediation step.

Loading…