flutter-improving-accessibility
Configure Flutter apps for assistive technologies including screen readers and keyboard navigation.
- Covers UI design fundamentals: font scaling, color contrast (4.5:1 for normal text, 3:1 for large), and 48x48 pixel minimum tap targets
- Provides semantic annotation patterns using
Semantics,MergeSemantics, andExcludeSemanticswidgets to expose widget tree structure to assistive tools - Includes web-specific guidance on enabling the semantics layer (disabled by default for performance) and mapping custom components to ARIA roles
- Offers a compliance checklist and validation feedback loop for testing with screen readers like VoiceOver and TalkBack
Implementing Flutter Accessibility
Contents
- UI Design and Styling
- Accessibility Widgets
- Web Accessibility
- Adaptive and Responsive Design
- Workflows
- Examples
UI Design and Styling
Design layouts to accommodate dynamic scaling and high visibility. Flutter automatically calculates font sizes based on OS-level accessibility settings.
- Font Scaling: Ensure layouts provide sufficient room to render all contents when font sizes are increased to their maximum OS settings. Avoid hardcoding fixed heights on text containers.
- Color Contrast: Maintain a contrast ratio of at least 4.5:1 for small text and 3.0:1 for large text (18pt+ regular or 14pt+ bold) to meet W3C standards.
- Tap Targets: Enforce a minimum tap target size of 48x48 logical pixels to accommodate users with limited dexterity.
Accessibility Widgets
Utilize Flutter's catalog of accessibility widgets to manipulate the semantics tree exposed to assistive technologies (like TalkBack or VoiceOver).
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K