MediumMobileMeasured

Buttons and links too small and too close to tap

Small, crowded buttons and links make shoppers mis-tap on their phones.

Checked on: every page the audit scans · Zolvio’s check: “Small tap targets”

Why it costs you sales

A finger is far less precise than a mouse pointer. Small links and buttons packed close together lead to taps on the wrong thing: the wrong size selected, the wrong page opened.

The WCAG 2.2 accessibility guidelines set a minimum: a target smaller than 24 by 24 pixels needs enough space around it that it can’t be confused with its neighbours.

How Zolvio detects it

Zolvio opens the page at 375 pixels wide in a real browser and measures every link, button and form control a shopper can tap. A target smaller than 24 by 24 pixels counts as crowded when another target sits within 12 pixels of its centre, or another small target’s centre is less than 24 pixels away: the WCAG 2.2 minimum target-size rule. Links inside a sentence are exempt, as WCAG exempts them. A label is part of its own field’s target: one for a field shown at 24 by 24 pixels or more isn’t a target of its own, and a label never crowds its own field (a label for a hidden control, such as a variant swatch, is the target and still counts). Content hidden until it takes keyboard focus, such as a “Skip to content” link or a screen-reader label, isn’t measured. 3 or more crowded small targets flag the page, and the finding lists them (up to ten).

This finding is reported after AI review: on paid plans with AI turned on, the AI agent checks it against the audit’s evidence before it reaches your issue list. Audits without AI report only the 22 measured checks.

AI screenshot review also looks for this problem (“Tap targets too small”) in desktop and mobile screenshots. When both find it, you get one issue.

How to fix it

  1. Open the page in your browser’s device mode at about 375px wide, or in the theme editor’s mobile preview, and find the links and buttons the finding lists.
  2. Make them at least 24 by 24 pixels, or add space around them; 44 by 44 is more comfortable for a thumb.
  3. Make the change in your theme’s CSS (often assets/base.css, or the section’s custom CSS), inside a mobile media query if the desktop layout should stay the same.
  4. Tap through the menu, the variant options and the footer links on a phone.

In Zolvio: on paid plans with AI turned on, the guided fix writes these steps for your own store and theme: where to click in Shopify admin or the theme editor, or which file to open, the line to find and the code to add. Each file opens in Shopify’s code editor. Zolvio never edits your theme: you make the change, then Verify fix checks your published theme for code changes (or you mark it fixed), and later audits confirm the problem is gone.

Common questions

Why does “Buttons and links too small and too close to tap” cost a Shopify store sales?

A finger is far less precise than a mouse pointer. Small links and buttons packed close together lead to taps on the wrong thing: the wrong size selected, the wrong page opened. The WCAG 2.2 accessibility guidelines set a minimum: a target smaller than 24 by 24 pixels needs enough space around it that it can’t be confused with its neighbours.

How does Zolvio detect “Buttons and links too small and too close to tap”?

Zolvio opens the page at 375 pixels wide in a real browser and measures every link, button and form control a shopper can tap. A target smaller than 24 by 24 pixels counts as crowded when another target sits within 12 pixels of its centre, or another small target’s centre is less than 24 pixels away: the WCAG 2.2 minimum target-size rule. Links inside a sentence are exempt, as WCAG exempts them. A label is part of its own field’s target: one for a field shown at 24 by 24 pixels or more isn’t a target of its own, and a label never crowds its own field (a label for a hidden control, such as a variant swatch, is the target and still counts). Content hidden until it takes keyboard focus, such as a “Skip to content” link or a screen-reader label, isn’t measured. 3 or more crowded small targets flag the page, and the finding lists them (up to ten).

How do I fix “Buttons and links too small and too close to tap” on Shopify?

Open the page in your browser’s device mode at about 375px wide, or in the theme editor’s mobile preview, and find the links and buttons the finding lists. Make them at least 24 by 24 pixels, or add space around them; 44 by 44 is more comfortable for a thumb. Make the change in your theme’s CSS (often assets/base.css, or the section’s custom CSS), inside a mobile media query if the desktop layout should stay the same. Tap through the menu, the variant options and the footer links on a phone.

Related

Documentation

  • How audits work — What an audit scans and how findings become issues.
  • Guided fixes — Step-by-step fixes written for your theme, with links into the code editor.
  • Heatmaps — See where shoppers tap and how far they scroll, on mobile and desktop.