Intro

title: "Introduction to Mobile Accessibility" weight: 11 description: "Learn what mobile accessibility means, why mobile devices need dedicated accessibility testing, the mobile-specific WCAG considerations, and how mobile differs from desktop accessibility." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, mobile]

Mobile accessibility ensures that websites and applications work for users on smartphones and tablets, addressing unique challenges like small touch targets, gesture interactions, screen reader differences between iOS and Android, and variable screen sizes.

## What You'll Learn

You will understand why mobile accessibility needs separate attention, the key mobile-specific WCAG criteria, and how mobile assistive technologies differ from desktop.

## Why It Matters

Mobile devices account for over 60 percent of global web traffic. Users with disabilities access the web primarily through mobile devices. If your site is not accessible on mobile, you exclude the majority of web users.

## Real-World Use

A user with motor disabilities relies on her phone for all online tasks. A banking app requires precise two-finger gestures that she cannot perform. The app fails WCAG SC 2.5.1 (Pointer Gestures) because there is no single-pointer alternative.

## Mobile vs Desktop

```mermaid
flowchart TD
  A[Mobile Accessibility] --> B[Touch Targets]
  A --> C[Gestures]
  A --> D[Screen Size]
  A --> E[Mobile Screen Readers]
  A --> F[Orientation]
  B --> G[44x44 px minimum]
  C --> H[Single-pointer alternatives]
  D --> I[Responsive content]
  E --> J[VoiceOver / TalkBack]
  F --> K[No orientation lock]

Mobile Accessibility Basics

Mobile accessibility extends WCAG principles to the mobile context. Touch targets must be large enough to tap. Gestures must have simple alternatives. Content must reflow at all screen sizes.

<!-- Mobile-friendly touch target -->
<button
  style="min-width: 48px; min-height: 48px; padding: 12px;"
  aria-label="Submit form"
>
  Submit
</button>

/* Mobile touch target sizing */
.mobile-button {
  min-width: 48px;
  min-height: 48px;
  padding: 12px 16px;
  /* 48px minimum ensures easy tapping */
}

.nav-link {
  display: inline-block;
  padding: 12px;
  min-height: 44px;
}

// Mobile accessibility check helper
function checkMobileAccessibility() {
  const issues = [];

  document.querySelectorAll('button, a, input, select').forEach(el => {
    const rect = el.getBoundingClientRect();
    if (rect.width < 44 || rect.height < 44) {
      issues.push({
        element: el,
        issue: `Touch target too small: ${rect.width}x${rect.height}px`
      });
    }
  });

  return issues;
}

Common Mistakes

• Testing mobile accessibility only on desktop emulation
• Designing touch targets smaller than 44x44px
• Using hover-only interactions that do not work on touch
• Locking screen orientation
• Not testing with actual mobile screen readers
• Creating complex gestures without single-tap alternatives
• Ignoring mobile viewport and zoom settings

Practice and Challenge

Practice 1: Check touch target sizes on your mobile site. Practice 2: Test navigation with VoiceOver on iOS. Practice 3: Test navigation with TalkBack on Android. Practice 4: Rotate your phone and check if the site adapts. Practice 5: Check if any interactions require hover.

Challenge: Perform a mobile accessibility audit of a local business website. Check: touch target sizes (44x44px), screen reader compatibility (VoiceOver and TalkBack), orientation support, gesture alternatives, and zoom capability. Document at least 5 issues found.

FAQ

Mini Project

Create a mobile accessibility testing checklist that covers: touch targets, gestures, screen reader compatibility, orientation, zoom, form inputs, navigation, and focus. Test your own site against this checklist and document the results.

What's Next

Touch Targets covers the specific requirements for touch target sizing.