Mobile App Accessibility
Build mobile apps that work for everyone. Covers screen reader support, dynamic type, color contrast, touch target sizing, and the accessibility patterns that make native apps usable by the 1 billion people worldwide with disabilities.
Mobile accessibility is not optional — it is a legal requirement in many jurisdictions and a moral imperative everywhere. More than 1 billion people worldwide have a disability that affects how they use technology. Building accessible apps is not about adding features for a minority — it is about building products that work for everyone, including users with temporary impairments and situational limitations.
Platform Accessibility APIs
iOS (UIAccessibility):
VoiceOver: Screen reader (built in, gesture-based)
Dynamic Type: System-wide font scaling
Switch Control: External switch devices
Voice Control: Voice-driven navigation
Key properties:
accessibilityLabel: What is this element?
accessibilityHint: What will happen if I activate it?
accessibilityTraits: Is it a button, link, header, image?
accessibilityValue: Current value (slider, toggle state)
isAccessibilityElement: Should VoiceOver see this?
Android (AccessibilityService):
TalkBack: Screen reader (built in, gesture-based)
Font size: System-wide text scaling
Switch Access: External switch devices
Voice Access: Voice-driven navigation
Key properties:
contentDescription: What is this element?
importantForAccessibility: Should TalkBack see this?
accessibilityLiveRegion: Announce dynamic changes
labelFor: Associate label with input
React Native:
accessible: Mark as accessibility element
accessibilityLabel: Screen reader label
accessibilityRole: "button", "link", "header", "image"
accessibilityState: { disabled, selected, checked, busy }
accessibilityHint: What will happen
accessibilityLiveRegion: "polite" or "assertive"Touch Target Sizing
Minimum touch target sizes:
WCAG 2.2 AA: 24×24 CSS pixels (minimum)
WCAG 2.2 AAA: 44×44 CSS pixels (recommended)
Apple HIG: 44×44 points
Material Design: 48×48 dp
Common violations:
✗ Close button: 16×16 (too small)
✗ Link text: "here" (tiny tap target)
✗ Icon-only buttons: 24×24 without padding
✗ List items with no padding between rows
Fixes:
✓ Minimum 44×44pt hit area (padding counts!)
✓ 8pt minimum spacing between touch targets
✓ Full-row tap targets for list items
✓ Generous padding on interactive elementsAnti-Patterns
| Anti-Pattern | Consequence | Fix |
|---|---|---|
| No accessibilityLabel on images | Screen reader says “image” or filename | Descriptive labels for all meaningful images |
| Decorative images marked accessible | Screen reader noise on irrelevant images | isAccessibilityElement = false for decorative |
| Color-only status indicators | Color blind users cannot distinguish states | Icons + color + text for all status indicators |
| Hard-coded font sizes | Dynamic Type / font scaling does not work | Use system-relative font sizes |
| No skip navigation | Screen reader reads entire header on every screen | Grouping, headers, and skip navigation |
Accessibility is quality engineering. The same patterns that make apps accessible — clear labels, logical structure, sufficient contrast, adequate touch targets — also make apps better for every user. Build accessibility in from the start; retrofitting it is 10x more expensive.
