# Touch Target Sizes on Mobile Storefronts: Small Buttons Lose Sales Source: https://storefronta11y.com/blog/2026-10-25-touch-target-sizes-mobile-storefront.html Reviewed October 25, 2026 Tiny tap targets on phones frustrate every shopper and fail accessibility minimums. The sizes to aim for, the controls that shrink most, and how to audit on a real device. ## Why target size is an accessibility issue and a revenue issue Most storefront traffic is mobile, and most mobile interaction is a thumb working one handed. A control that is hard to tap is hard for everyone, and hardest for shoppers with tremors, limited dexterity, larger hands, or a phone in a moving vehicle. Accessibility guidelines quantify what thumbs already know: targets need real area, with real space around them. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at Level AA, with narrow exceptions, and platform guidelines from major phone makers recommend roughly 44 points. Treat 24 as the legal floor and the mid 40s as the design goal. Every pixel between the two is measurable in missed taps, accidental clicks on the wrong item, and quiet abandonment. ## The controls that shrink on real storefronts Quantity steppers are repeat offenders, with plus and minus buttons rendered as small text characters rather than real buttons. Close icons on popups and drawers shrink to whatever the designer could fit in a corner. Pagination, filter checkboxes, footer links packed in tight columns, and the remove item control in the cart all trend tiny, and they cluster at exactly the moments a shopper is trying to finish something. Image based controls hide their size problem best. A carousel dot looks decorative and functions as a navigation target a few pixels wide. Social icons in the footer, star rating inputs, and swatch thumbnails on compact product cards belong on the same audit list. If it can be tapped, it has a size, and the size can be measured. ## How to audit on your own phone Open your store on your phone and work through a full purchase with your thumb only, holding the phone one handed the way shoppers do on transit. Note every control you miss, hit wrong, or have to aim at carefully: the small x, the stepper, the remove link, the filter box. Your misses are data. Customers with less steady hands miss more and forgive less. Then measure the worst offenders properly. Browser developer tools can report the rendered size of any element, and automated accessibility audits flag undersized targets by name. Build the fix list from measured sizes under 24 pixels first, then those under the comfortable range on critical controls like add to cart, checkout, and quantity. ## Fixing size without redesigning the page Most fixes are padding, not redesign. A link or icon can keep its visual size while its tappable area grows through padding or a pseudo element, so the design stays delicate and the target becomes generous. Spacing matters as much as the box itself: two 24 pixel targets stacked with no gap are a single trap for a thumb. Prioritize by consequence. Checkout flow controls, cart editing, and the close buttons that free a trapped shopper come first. Footer link farms can wait a sprint. Put minimum target sizes into your theme component rules so new features inherit them, because target shrinkage creeps back in one tasteful little icon at a time. ## Related reading If this topic is useful, these earlier guides go deeper on connected questions: [Visible Focus Indicators: The Outline Keyboard Shoppers Navigate By](https://storefronta11y.com/blog/2026-10-24-visible-focus-indicators-storefront.md), [Alt Text for Product Images: A Practical Guide for Stores](https://storefronta11y.com/blog/2026-10-24-alt-text-product-images-guide.md), and [How to Test Your Checkout With Only a Keyboard](https://storefronta11y.com/blog/2026-10-23-keyboard-only-checkout-test.md). ## Frequently asked questions ### What is the minimum touch target size for accessibility? WCAG 2.2 AA requires 24 by 24 CSS pixels for most targets, with exceptions for inline text links and a few other cases. Major platform guidelines recommend larger, around 44 points. Design to the comfortable number and treat 24 as the floor below which a control is a defect. ### Do text links inside paragraphs need to be 24 pixels tall? Inline links within sentences are exempt from the minimum target size criterion, because enlarging them would wreck text layout. Links standing alone as controls, in menus, footers, and lists, are not exempt in spirit. Give standalone link lists real line height and spacing. ### Can I enlarge the tap area without making the button look bigger? Yes. Padding and invisible expanded hit areas are standard techniques. The visible glyph or icon can stay small while the interactive box reaches a comfortable size. Just keep neighboring targets from overlapping, which trades one miss for another. ### Why do shoppers keep opening the wrong product in my grid? Tight grids with small gaps make adjacent cards easy to confuse by thumb, especially when the whole card is one link and cards sit close. More vertical spacing between rows and clear separation between the image link and the title link reduce wrong taps measurably on mobile heavy stores.