Mobile accessibility design

Designs mobile layouts and interactions for larger text, assistive technology and differing motor or visual needs.

mobile-accessibility-design

Team members using this skill

AgentMira

See how it helps

When is it useful?

Use when a flow must remain usable beyond default font size and touch precision.

What does it help you do?

Checks target spacing, reachable controls and alternatives to gestures.
Designs text scaling, reflow and meaningful screen-reader order.
Uses sufficient contrast, non-color cues and reduced-motion behavior.

Try asking this

Redesign checkout for large system text and VoiceOver without hiding the final payment button. Increase system text, open the keyboard and traverse payment fields with a screen reader. The final amount, error messages and payment action must remain reachable.

Detailed documentation

Read the skill’s original instructions, examples and checks in their authored language.

Details…Show less

Mobile Accessibility

Design mobile interfaces that everyone can operate comfortably—by touch, with large system text, with VoiceOver or TalkBack, in bright sunlight, and with reduced motion enabled.

1. Touch targets and motor accessibility

Make every interactive target at least 44x44 pt on iOS and 48x48 dp on Android, with at least 8 pt/dp spacing between adjacent tap targets. When an icon is visually smaller (16–24 px), expand its hit area with padding or hit-slop.
Never require complex multi-finger gestures, timed double-taps, or fine drag precision without a simple single-tap alternative.

2. Dynamic Type, font scaling and reflow

Design layouts that scale gracefully when the user increases OS text size (iOS Dynamic Type / Android font scaling up to 200%):
- Allow text containers to grow vertically instead of clipping or truncating critical labels with ....
- Stack side-by-side label/value pairs or button rows vertically when large text sizes would squeeze them below readable widths.
- Keep sticky headers and bottom bars compact so they do not consume more than a third of the viewport at large text sizes.

3. Screen readers (VoiceOver & TalkBack) and focus order

Define a logical top-to-bottom, left-to-right focus order for every screen.
Group composite cards and list rows into a single accessible element whose announcement combines the primary title, key status and value, and expose secondary row buttons (e.g., "Delete", "Share") as custom accessibility actions.
Give every icon-only button, badge and control an explicit localized accessibility label, role (button, header, switch, tab) and state (selected, checked, disabled, expanded).
When a modal, bottom sheet, toast or inline validation error appears, move or announce focus so screen-reader users know immediately what changed.

4. Contrast, color independence and reduced motion

Meet at least 4.5:1 contrast for normal text and 3:1 for large text and essential UI icons in both light and dark themes.
Never rely on color, sound or animation alone to convey status, errors or required fields; pair color with an icon, text label or pattern.
Provide a calm reduceMotion alternative (cross-fade or instant state change) for every screen transition and animated state.

Before you finish

All interactive targets are >= 44x44 pt / 48x48 dp with safe spacing.
Layouts reflow cleanly without truncation at large Dynamic Type / font scaling sizes.
VoiceOver / TalkBack grouping, labels, roles and modal focus announcements are specified.
Contrast meets WCAG AA in light/dark themes, and reduced-motion behavior is defined.

Included files 1

SKILL.md