Touch Targets Too Small: Accessibility Meets Mobile

A mouse pointer is a single pixel. A fingertip is a smudge the size of a coin, attached to a hand that might be cold, shaking, holding a coffee, or belonging to someone who is seventy-four. Most of the small-tap-target problems on the web come from designers forgetting this difference: they design on a large monitor with a mouse, where a fourteen-pixel icon is trivially clickable, and then ship that icon to a phone where hitting it is a game of skill.

I think touch targets are the best example of a general truth: accessibility problems are usually usability problems with the volume turned up. A person with a hand tremor, arthritis, or Parkinson’s experiences your tiny close button as nearly unusable. But everyone else experiences it too, in diluted form, as a mis-tap on a bumpy bus, a fat-fingered link while walking, an accidental ad click that was actually aimed at the dismiss icon next to it. The disabled user is the canary; the mine is full of everybody. When you fix the target size for the person with the tremor, you fix it for the person on the bus at the same time, and the person on the bus vastly outnumbers your analytics’ ability to explain why mobile conversion is worse than desktop.

The standards give concrete numbers, and for once they’re easy to remember. The current web accessibility guidelines set a minimum of 24 by 24 CSS pixels for interactive targets at the level most organizations aim for, and that is genuinely a floor, not a goal. Apple’s design guidance has recommended 44 points for years, and Google’s guidance for Android sits in the same neighborhood. The gap between 24 and 44 tells you something: the standards define where usability ends, and the platform vendors, who watch billions of taps, define where comfort begins. Aim for the vendors’ number. Nobody has ever complained that a button was too easy to press.

There’s a subtlety that saves many designs: the visual size and the touch size don’t have to match. HTML and CSS let you draw a small icon while giving it generous padding, and the padded area is all tappable. The little 16-pixel X can stay 16 pixels on screen while owning a 44-pixel square of touchable space. This means the fix for small targets is usually not a redesign. It’s padding. The design stays exactly as elegant and airy as before; the buttons just stop requiring marksmanship.

Spacing matters as much as size, and this is where real damage happens. A large button pressed against another large button is still a problem, because the failure mode of a touch isn’t a miss into empty space, it’s a hit on the wrong thing. The classic case is a row of icons in a mobile header: menu, search, cart, account, all adjacent, all small. Miss the cart and you’ve opened the account panel, and now the user is somewhere they didn’t ask to be, mildly annoyed, one step further from buying. Worse are the destructive neighbors: delete next to edit, dismiss next to accept, unsubscribe next to confirm. When a mis-tap is expensive, adjacency is not a style question anymore.

The business cost of all this is real but almost perfectly hidden. Nobody emails you to say your tap targets are too small. What you see instead, if you see anything, is a soft mobile conversion rate, rage taps in session recordings, carts abandoned at the step where the tiny quantity stepper lives. The user experiences a vague friction, concludes your site is annoying, and leaves. Sites feel janky on phones for reasons their owners can’t name, and undersized, overcrowded targets are among the most common reasons. When GazeSite audits a page it renders the mobile viewport with a real browser precisely because this class of problem doesn’t exist on desktop; the same page, same HTML, can be comfortable under a mouse and hostile under a thumb.

If you want to find these problems yourself, the method is cheap. Take your phone, and use your site the way a customer would, but with your left hand if you’re right-handed. The non-dominant hand is a free simulator of reduced dexterity. Try to check out. Try to close the newsletter popup. Try to tap the second link in a paragraph of body text, which is the hardest target on most pages because inline links are only as tall as the text line. Where your wrong hand fumbles, some meaningful fraction of your right-handed visitors fumbles too.

The deeper lesson is that the finger, unlike the cursor, is part of a body, and bodies vary. Designing for the steadiest, warmest, most practiced hands means designing for people at their best, and people mostly aren’t at their best when they’re using your site. They’re distracted, in motion, one-handed, aging. Big targets forgive all of that. Forgiveness, it turns out, converts.