← Back to Accessalyze

WCAG Mobile Accessibility Requirements

Over 60% of web traffic comes from mobile devices. Mobile accessibility is not a nice-to-have — it's essential for reaching the full range of users with disabilities, including those who rely on mobile screen readers as their primary browsing method.

Mobile-Specific WCAG 2.1 Criteria

Touch Target Size

Small touch targets are a major mobile accessibility failure. People with motor impairments, older users, and users with tremors struggle to hit small targets accurately.

/* Ensure minimum tap target size */
button, [role="button"], a, input, select, textarea {
  min-height: 44px;
  min-width: 44px;
  padding: 8px 16px; /* Adds to clickable area without changing visual size */
}

/* For icon buttons: use padding to expand target */
.icon-btn {
  /* Visual icon: 20×20 */
  padding: 12px; /* Effective click area: 44×44 */
}

Orientation (1.3.4)

/* FAIL: locks to portrait only */
@media screen and (orientation: landscape) {
  body { display: none; }
}

/* FAIL in CSS: this alone doesn't meet 1.3.4, but */
/* also avoid locking in HTML/JS */

/* JavaScript screen lock — only acceptable for video players, games */
screen.orientation.lock('portrait'); // Only if truly essential to the app

Exceptions exist for content where a specific orientation is essential — a piano keyboard app, a panoramic viewer. But locking a standard website to portrait is never acceptable.

Content Reflow (1.4.10)

At 320px CSS width (equivalent to 400% zoom on a 1280px screen), content must be readable without horizontal scrolling.

/* FAIL: fixed widths break reflow */
.container { width: 800px; }
.sidebar { width: 300px; float: left; }

/* PASS: fluid layout */
.container { max-width: 100%; }
.layout { display: flex; flex-wrap: wrap; gap: 1rem; }
.main { flex: 1 1 300px; min-width: 0; }
.sidebar { flex: 0 1 280px; min-width: 0; }

/* Viewport meta tag — required for proper mobile rendering */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Gesture Alternatives (2.5.1)

Any feature that uses multi-touch gestures (pinch-to-zoom, swipe, two-finger scroll) must have a single-pointer alternative:

<!-- Map pinch-to-zoom: must also have +/- buttons -->
<div id="map" aria-label="Interactive map">
  <button aria-label="Zoom in">+</button>
  <button aria-label="Zoom out">−</button>
</div>

<!-- Carousel swipe: must also have previous/next buttons -->
<div class="carousel" role="region" aria-label="Product images">
  <button aria-label="Previous image">‹</button>
  <button aria-label="Next image">›</button>
</div>

Testing on Mobile

VoiceOver (iOS)

• Enable: Settings > Accessibility > VoiceOver
• Navigate: swipe right/left to move between elements
• Activate: double-tap
• Use the rotor (twist two fingers) to navigate by heading, link, or form control

TalkBack (Android)

• Enable: Settings > Accessibility > TalkBack
• Navigate: swipe right/left between elements
• Activate: double-tap
• Reading controls: swipe up/down to change navigation mode

What to Test on Mobile

• All interactive elements are reachable by swipe navigation
• Product images have meaningful alt text
• Forms are labeled and keyboard doesn't obscure form fields
• Content reflows without horizontal scroll at any text size
• No content is orientation-locked
• Touch targets are large enough to activate reliably

← Back to Accessalyze