Mobile website accessibility: pinch zoom, text size, reflow and tap targets

Most visitors to a small-business website arrive on a phone. Many of them zoom in to read, use larger system text, hold the phone sideways or tap with less precision than a designer expects. This guide covers the mobile checks that matter most and how to fix each one.

1. Don't block pinch zoom

One line in a theme's <head> can stop visitors from zooming. People with low vision rely on zoom, so remove maximum-scale=1 and user-scalable=no if you find them:

<!-- Blocks zoom: avoid -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Allows zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1">

On Shopify this is usually in theme.liquid; on WordPress, in the theme's header file or a header plugin. Wix and Squarespace set the viewport themselves. After the change, open the site on a phone and pinch to zoom.

2. Let text grow to 200%

WCAG asks that text can be resized up to 200% without losing content or features (1.4.4 Resize Text). Common problems: text in fixed-height boxes that gets cut off, buttons whose labels overflow, and text baked into images. Use relative sizes (rem) and let boxes grow with their content (min-height rather than height).

3. Fit a 320px-wide screen without sideways scrolling

Content should reflow into one column at a width of 320 CSS pixels, which is also what a desktop page looks like at 400% zoom (1.4.10 Reflow). Wide tables, fixed-width images, long unbroken URLs and embedded maps or booking widgets are the usual culprits. Quick fixes:

img, video, iframe { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; } /* wide tables may scroll on their own */
a { overflow-wrap: anywhere; }

4. Make tap targets big enough

WCAG 2.2 asks for targets of at least 24 by 24 CSS pixels, or enough space around smaller ones (2.5.8 Target Size (Minimum)). Watch for tiny social icons in the footer, close buttons on pop-ups, carousel dots and phone numbers crammed next to each other. Padding is the easy fix:

.social a, .close-btn { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }

44 pixels is comfortably above the minimum and easier for everyone to tap.

5. Label the menu button

The hamburger icon is often a button with no name, so a screen reader says only "button". Give it a name and tell assistive tech whether the menu is open:

<button aria-label="Menu" aria-expanded="false" aria-controls="nav">☰</button>

Update aria-expanded to "true" when the menu opens, move focus into it, and let Escape close it.

6. Work in both orientations

Don't lock the site to portrait or landscape (1.3.4 Orientation). Some people have their phone or tablet mounted in one position.

7. Keep sticky bars small

A sticky header, a "Call now" bar and a cookie banner together can cover half a phone screen once text is zoomed. Keep sticky elements short, and see our cookie banner, pop-up and chat widget guide.

A 5-minute phone self-test

1. Pinch to zoom on your homepage. Does it zoom?
2. Set your phone's text size to the largest setting and reload. Is anything cut off or overlapping?
3. Scroll every main page. Do you ever have to scroll sideways to read a line?
4. Tap every footer icon and pop-up close button with your thumb. Do you hit the wrong one?
5. Rotate the phone. Does the site still work?

What a scan can and can't check here

An automated scan like ours can flag a viewport tag that blocks zoom, tap targets that are too small or too close together on the page it loads, icon-only buttons with no name, and low-contrast text. It can't hold your phone, try your largest system text setting, judge whether content is cut off at 200% or whether sticky bars cover what you're reading, or rotate the screen. The self-test above covers that part. Our free contrast checker and keyboard navigation test cover other quick wins.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• How to test your website with a screen reader in 15 minutes (VoiceOver, NVDA, TalkBack)
• Website accessibility maintenance plan for small businesses: who owns it and what to check each month
• Webflow accessibility fixes: a practical checklist for small-business sites
• Is your small business website AI-ready? The accessibility basics AI agents rely on

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.