How to fix: small touch targets

What it looks like in the wild

Mobile users miss-tap small icons.

The screen-reader user, keyboard user, or low-vision user encountering this issue does not get an error message. The page just stops working for them. Which is why this kind of bug rarely shows up in your error tracker; it shows up in support tickets, lawsuits, and abandoned conversions.

Why it fails WCAG

Motor accessibility requires comfortable hit areas.

The wrong pattern (avoid)

.icon-btn { width: 16px; height: 16px; }

The right pattern (copy this)

.icon-btn { width: 44px; height: 44px; padding: 12px; }

Notes from real audits

• WCAG 2.2 added 2.5.8 Target Size (Minimum) at 24×24 (Level AA).

Priority: Moderate

This will not stop a user completing a task on its own, but it accumulates. A page carrying several moderate findings degrades into one that is technically usable and practically exhausting — and an auditor counts them individually.

Because the cause is almost always a shared component rather than a single page, fix it where the component is defined and re-scan the whole site. Record 2.5.5, 2.5.8 on the ticket verbatim: that string is what an auditor, a procurement questionnaire or a regulator will search for.