accessibility-patternslisted

# Accessibility Patterns Skill Practical accessibility patterns for Flutter with Material 3, Semantics API, and screen reader support on all platforms. ## When to Use - "make this accessible" / "fix a11y" / "screen reader support" - "Semantics" / "TalkBack" / "VoiceOver" / "touch targets" - "color contrast" / "text scaling" / "reduce motion" - Before launching or auditing any user-facing screen --- ## Quick Reference: Common Issues | Issue | Impact | Fix | |-------|--------|-----| | Missing `Semantics` label | Screen readers skip widget | `Semantics(label: ...)` or `tooltip` | | Touch target < 48x48 | Hard to tap for motor impaired | `SizedBox(width: 48, height: 48)` | | Low color contrast | Unreadable for low vision | 4.5:1 text, 3:1 UI (WCAG AA) | | No focus traversal order | Illogical screen reader flow | `FocusTraversalGroup` + `OrderedTraversalPolicy` | | Image without `semanticLabel` | Screen readers announce "image" | `semanticLabel` or `excludeFromSemantics` | | Form without error announce | Errors invisible to screen reader | `SemanticsService.announce()` | | Animations ignore reduced motion | Vestibular disorder triggers | Check `AccessibilityFeatures.reduceMotion` | | Custom widget not focusable | Keyboard/switch users can't reach | `Focus` widget + `onKey` handler | --- ## Semantics Widget Patterns ### Labels and Hints ```dart // ❌ Icon button — screen reader says "button" IconButton( onPressed: onDelete, icon: const Icon(Icons.delete), ) // ✅ Meanin