Accessible Widget Library
Component Detail
User Interface
high complexity
Shared Component
mobile
1
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
A suite of custom Flutter widgets (AppButton, AppTextField, AppCard, AppSlider, etc.) with accessibility built in at the component level. Every widget enforces semantic labels, ARIA-equivalent Semantics properties, minimum 24x24 touch targets, visible focus indicators, and scalable typography. Acts as the single source of truth for accessible UI patterns across the entire mobile app.
accessible-widget-library
Responsibilities
- Provide semanticsLabel and excludeSemantics properties on all interactive widgets
- Enforce minimum touch target sizes (24x24 CSS pixels) via SizedBox constraints
- Apply design token colors for WCAG 4.5:1 text contrast and 3:1 UI contrast
- Expose non-drag tap alternatives for all swipe/drag interactions
- Support dynamic text scaling up to 200% without layout breakage
Interfaces
AppButton({required String label, required VoidCallback onTap, String? semanticsHint})
AppTextField({required String label, String? semanticsDescription, bool obscureText})
AppCard({required Widget child, String? semanticsLabel, VoidCallback? onTap})
AppDismissible({required Widget child, required VoidCallback onDismiss, required VoidCallback onTapAlternative})
AppFocusIndicator({required Widget child})
AppScaffold({required Widget body, String? pageSemanticLabel})