Mobile Accessibility: Touch Targets, Zoom, and Responsive Design

More than half of web traffic now comes from phones, and for many people with disabilities the phone is the primary way they get online. Yet mobile accessibility is where many WordPress sites quietly fall down: buttons too small to tap, text that can’t be zoomed, menus that only work on hover, and layouts that break the moment someone enlarges their text. The good news is that most of these problems are fixable at the theme and CSS level.

Why Mobile Accessibility Is Its Own Problem

A site can pass a desktop review and still be frustrating on a phone. Users with motor impairments, tremors, or limited dexterity struggle with tiny targets. Users with low vision rely on pinch-zoom, browser text scaling, or large system fonts. Screen reader users on iOS (VoiceOver) and Android (TalkBack) navigate by swiping through elements, so your reading order and labels matter just as much as on desktop.

WCAG 2.2 doesn’t have a separate “mobile” standard. Instead, several existing success criteria apply with special force on small screens. Knowing which ones helps you test efficiently.

Touch Targets: Size and Spacing

WCAG 2.2 added Success Criterion 2.5.8, Target Size (Minimum), at Level AA. Interactive targets should be at least 24 by 24 CSS pixels, or have enough spacing around them that a 24 pixel circle centered on each one doesn’t overlap another target. There are exceptions, such as links inside a sentence of text, but buttons, icon controls, and menu items are generally covered.

The 24 pixel minimum is a floor, not a goal. The Level AAA criterion (2.5.5) asks for 44 by 44 pixels, and platform guidelines from Apple and Google recommend roughly 44 to 48 pixels. If your audience includes older adults or people with motor difficulties, aim for the larger size on primary actions.

Common WordPress Offenders

• Social sharing icons packed tightly together in a footer or post header
• Close buttons on popups and cookie banners that are only a few pixels wide
• Pagination links and tag clouds with minimal padding
• Dropdown menu toggles on mobile navigation that are smaller than the hamburger icon beside them

Most of these can be fixed with padding in your theme’s CSS rather than by changing icon size, which keeps your design intact while enlarging the tappable area.

Zoom, Text Resizing, and Reflow

Three criteria govern how your content behaves when users enlarge it:

1. Resize Text (1.4.4): Content must remain usable when text is scaled to 200 percent without assistive technology.
2. Reflow (1.4.10): Content should fit a 320 CSS pixel wide viewport (equivalent to 400 percent zoom on a desktop) without horizontal scrolling, except for things like data tables and maps.
3. Text Spacing (1.4.12): Users must be able to increase line height, letter spacing, and paragraph spacing without content being clipped or overlapping.

The single most damaging mistake here is disabling zoom. A viewport tag containing user-scalable=no or a restrictive maximum-scale prevents pinch-zoom and is a frequent finding in audits. Remove it. Pair that with relative units (rem, em, percentages) for font sizes and containers, so layouts adapt instead of overflowing.

Responsive Design That Doesn’t Break Access

Responsive layouts bring their own accessibility traps. Keep these in mind when testing your theme:

• Don’t lock orientation. Criterion 1.3.4 says content shouldn’t be restricted to portrait or landscape unless essential. Some users mount their device in a fixed position.
• Avoid hover-only interactions. Touch devices have no hover. Menus, tooltips, and revealed content need a tap or focus equivalent.
• Keep source order logical. CSS that reorders content visually can make screen reader and keyboard order differ from what sighted users see.
• Offer alternatives to complex gestures. Swipes, multi-finger gestures, and drag actions (criteria 2.5.1 and 2.5.7) need a simple single-tap or button alternative, such as previous/next buttons on a carousel.
• Label form fields and use the right input types. Using type="email" or type="tel" brings up the appropriate keyboard, and autocomplete attributes reduce typing effort.

A Quick Mobile Testing Routine

You don’t need a device lab. Work through this on a real phone if you can:

1. Pinch-zoom on several pages. If it won’t zoom, check the viewport meta tag.
2. Set your phone’s system font size to the largest setting and revisit key pages.
3. Rotate the device and confirm content still works in both orientations.
4. Turn on VoiceOver or TalkBack and complete a core task, such as finding contact details or checking out.
5. Tap every control with one thumb. If you miss or hit the wrong thing, so will your visitors.

Automated scanners can catch part of this, such as missing labels, a disabled-zoom viewport tag, and some target size problems, but they can’t judge whether your experience actually feels usable on a phone. Manual testing remains essential.

Take Action

LEWCA is a WordPress accessibility plugin that combines a WCAG scanner, which finds real code-level issues in your pages, with a visitor-facing accessibility toolbar. Unlike an overlay, it points you to the actual code that needs fixing. LEWCA Pro adds AI-powered code fix suggestions, scheduled scanning, and compliance reports. No tool can guarantee full compliance, but a regular scan makes the problems visible. See the pricing page to compare plans, or download LEWCA and run your first scan today.