Mobiles barrierefreies Design

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.