Mobile Accessibility & Inclusive App Development

Mobile accessibility ensures people with disabilities can perceive, operate, and understand native apps. It spans touch targets, gestures, orientation, focus navigation, announcements, color/contrast, scaling, captions, and motion sensitivity. WCAG applies to native apps, with platform-specific guidance from Apple and Google.

iOS (UIKit/SwiftUI)

• Use system controls; set accessibilityLabel, accessibilityHint, accessibilityTraits.
• Support Dynamic Type with scalable text styles (e.g., .title, .body).
• Respect Reduce Motion, Increase Contrast, Bold Text.
• Announce changes with UIAccessibility.post(notification: .announcement, …).
• Use .accessibilityHidden(true) to avoid duplicate elements when icons have text labels.

// SwiftUI example
Button("Pay") { submit() }
.accessibilityLabel("Pay now")
.accessibilityHint("Submits your order")

Text("Total: $24.99")
  .font(.title) // scales with Dynamic Type

// Announce an error
UIAccessibility.post(
  notification: .announcement,
  argument: "Card number invalid. Check and try again."
)

Android

• Prefer Material components; set android:contentDescription for images/icons.
• Use android:hint / TextInputLayout for labels; error via setError() + accessibility event.
• Support large font & Display size; respect Reduce motion/Remove animations.
• Expose roles/states through AccessibilityNodeInfo or Compose semantics.

<ImageButton
  android:id="@+id/btnPay"
  android:contentDescription="@string/pay_now"
  android:src="@drawable/ic_pay" />

/* Jetpack Compose */
Button(onClick = { submit() }, modifier = Modifier.semantics {
  contentDescription = "Pay now"
}) { Text("Pay") }

Touch Targets & Gestures

• Targets ≥ 44×44 pt (iOS) / 48×48 dp (Android); add hit-slop around icons.
• Provide alternatives to drag, long-press, multi-finger, and swipe-only actions.
• Prevent accidental activation; use confirmation for destructive actions.

Focus Order & Navigation

• Logical reading order in accessibility tree; group related items (e.g., cards) as one element if appropriate.
• When showing modals/sheets, move accessibility focus to the sheet and return it on dismissal.

Announcements & Status

• Announce significant UI changes (errors, success, added to cart) using platform notifications.
• Avoid “double speak” by hiding decorative views from accessibility.

Forms

• Each field has a visible label and programmatic name; don’t rely on placeholder as label.
• Provide input type (email, number) and helpful hints; auto-advance/focus carefully.
• Errors appear near the field, explained in plain language, and are announced.

Media

• Provide captions for video; transcripts for audio; audio descriptions where needed.
• Don’t autoplay media with sound; give clear play/pause controls and respect system media keys.