See plans and pricing

Buttons and links people tap on a touchscreen need to be big enough, and far enough apart from other tappable controls, to hit reliably. When targets are too small or crowded together — like tiny quantity +/- buttons squeezed next to each other on a mobile cart page — visitors with limited dexterity, hand tremors, or simply large fingers can accidentally tap the wrong control, such as removing an item instead of adding one.

How to fix it

1. Find small or closely spaced tappable controls on mobile, most commonly quantity stepper +/- buttons on the cart or product page, small icon-only buttons (wishlist heart, quick-view magnifier), and closely packed pagination or filter chips on a product-listing page.
2. Increase each control's unobscured tappable area to at least 24 by 24 CSS pixels — this can be done by enlarging the element itself (font-size, padding, min-width/min-height) rather than only its visual icon.
3. If a control genuinely cannot be made 24x24px (e.g. a deliberately compact inline icon), ensure there is enough spacing around it that a virtual 24px-diameter circle centered on it does not overlap any neighboring tappable control.
4. For quantity +/- buttons specifically, add horizontal margin/padding between the "-" button, the number field, and the "+" button so they are not touching or overlapping.
5. Test on an actual mobile device or a touch-emulation mode in browser dev tools to confirm each control can be tapped individually without accidentally triggering its neighbor.

<button id="qty-decrease" style="width:16px; height:16px;">-</button>
<button id="qty-increase" style="width:16px; height:16px; margin-left:-4px;">+</button>

<button id="qty-decrease" style="width:24px; height:24px; margin-right:8px;">-</button>
<button id="qty-increase" style="width:24px; height:24px;">+</button>

View the full rule reference from Deque University

See plans and pricing