Mobile Accessibility: Targets, Gestures, Zoom & Motion

Touch targets & spacing

• Minimum size: Aim for 44×44 px (or ~9–10 mm) tappable area.

• Spacing: Keep ~8 px between controls to prevent fat-finger errors.

• Hit areas: Make the tap area larger than the visible icon (padding).

• Labels: Put clear text next to icons; don’t rely on colour alone.

• Sticky UI: Ensure bottom sheets/toolbars don’t cover focused fields or key CTAs.

Quick win: Enforce a .tap-area { min-width:44px; min-height:44px; } utility and apply to all interactive controls.

Gestures & alternatives

• Single-gesture dependence is risky. Provide buttons or menus for actions like swipe-to-delete or drag-to-reorder.

• Drag & drop: Offer Move up/Move down buttons or a long-press menu.

• Carousels: Add Prev/Next buttons with visible focus; allow pause/stop.

• Hidden gestures: Surface them with hints (“Swipe left for more filters”) and provide an explicit control.

Rule of thumb: If it can be swiped, it should also be tappable.

Zoom & reflow (small screens must still work)

• Never disable zoom. Remove <meta name="viewport" content="… user-scalable=no">.

• Reflow: Content must work at 320 px width without sideways scrolling.

• Text sizing: Check at 200% zoom—headers wrap, but nothing overlaps or breaks.

• Inputs: Avoid sticky headers that cover focused fields or autocomplete panels.

Tip: Test portrait and landscape; many issues only appear in landscape with keyboards up.

Motion, animation & preference support

• Respect prefers-reduced-motion. Provide simpler transitions, no autoplay parallax.

• Duration & easing: Keep transitions ≤ 250–300 ms; avoid aggressive bounce/zoom.

• Scroll-linked effects: Offer a disable or toned-down path for motion-sensitive users.

• Video/GIFs: No auto-play with sound; provide pause.

• Notifications/toasts: Animate gently; keep them dismissible and focus-managed.

Forms on mobile (micro-friction = abandonment)

• Label everything. Place labels above fields; don’t use placeholder-only.

• Keyboards: Use appropriate type/inputmode (email, tel, numeric).

• Errors: Show specific, concise errors; focus moves to the first error; don’t scold per keystroke.

• Tap targets: Buttons like Continue/Pay should be large with clear states.

Dark mode & colour

• Token pairs: Define light/dark tokens for text, surfaces, borders, and states.

• Contrast: Maintain AA in both modes; don’t let dark mode drop to low contrast.

• Focus & links: Keep a visible focus ring and link styling in both themes.

Quick CSS helpers (copy/paste)

/* Tap areas */
.tap-area { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Focus visibility on mobile too */
:where(a,button,input,select,textarea,[role="button"]):focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

Test plan (10–12 minutes)

1. Thumb test: Can you comfortably tap nav, filters, tabs, close icons? Miss-taps < 5%.

2. Gesture alternatives: Perform key tasks without swiping/dragging.

3. Zoom/reflow: 200% zoom + 320 px width; no sideways scroll; no obscured inputs.

4. Motion check: Turn on Reduce Motion (OS setting) and verify calm behaviour; pause GIFs/videos.

5. Keyboard & forms: Correct mobile keyboards; clear labels/errors; large Continue/Pay buttons.

Common pitfalls (and fast fixes)

• Tiny icons as CTAs → wrap with .tap-area.

• Swipe-only controls → add visible buttons.

• Disabled zoom → remove user-scalable=no.

• Sticky bars covering fields → add safe areas; scroll focused input into view.

• Busy parallax → reduce for prefers-reduced-motion, add a pause.

Copy-paste checklist (Markdown)

How Adjustable helps (after structural fixes)

• Text Options and Page Options (page scaling) make small-screen reading easier.

• Contrast/Light/Dark/Colour modes improve legibility in diverse lighting.

• Motion preferences + hide images/animations reduce motion sensitivity.

• Reading Ruler, Screen Mask, Cursor Adjustment help focus on long pages or forms.

• Text to Speech and Language Translation aid comprehension on the go.

• Configurable toolbar or widget placement avoids covering mobile CTAs.

Try Adjustable

FAQs

What size should tap targets be?
Around 44×44 px tappable area is a solid target across devices.

Does responsive design guarantee accessibility?
No. You also need gesture alternatives, zoom, motion preferences, and focus visibility.

How do I handle swipe carousels?
Provide Prev/Next buttons, keyboard/focus support, and a pause. Don’t rely on swipe alone.

Will dark mode automatically meet contrast?
Not necessarily—define dark-mode tokens and test contrast for text and UI states.

Next steps

• Add .tap-area and remove any user-scalable=no.

• Provide button alternatives to swipe/drag actions.

• Implement prefers-reduced-motion support and test at 200% zoom.

• Install Adjustable to give mobile visitors on-page controls while you iterate.