Are your buttons big enough to tap on mobile?

Have you ever tried to tap a tiny “x” to close a mobile ad and accidentally clicked the ad instead? That same frustration is amplified for people with motor disabilities when using mobile devices.

What is a touch target anyway? The term “touch target” describes the screen area for any interactive element used to perform an action. Common examples include buttons, text links, navigation menu items, and form controls (e.g. checkboxes, sliders, or date pickers).

Our finger pads are not a great input device for precision. We need all the help we can get when it comes to accurate input on mobile devices.

Thankfully, there are some design guidelines we can use to ensure our touch targets work for everyone.

Touch target standards

The Web Content Accessibility Guidelines (WCAG) requires all touch targets to be at least 24 by 24 pixels. That’s the total tappable area, including any invisible padding around the visible element. So if you have a 16×16 pixel button, you’d need 4px of padding on all sides to meet the minimum.

While 24px meets accessibility requirements, Apple and Android recommend larger targets (44-59 pixels) because fingers are less precise than mouse cursors on touch devices. For most businesses, starting with the 24px WCAG minimum is the practical approach, but larger targets will create an even better user experience.

Accessible touch targets don’t require a redesign

Start by increasing padding around buttons and links to create larger tappable areas. Consider making entire components clickable rather than just the text. For example, let users tap anywhere on a card, not just the headline or text link. For social media icons, use larger sizes that are easier to target with a thumb.

These small changes can dramatically improve the mobile experience for all your users, whether they’re dealing with motor disabilities or just using their device with one hand.