flutter-improving-accessibility
Configure Flutter for screen readers and assistive tech
Developer Setup
Setup & Installation
npx skills add https://github.com/flutter/skills --skill flutter-improving-accessibilitynpx skills add https://github.com/flutter/skills --skill flutter-improving-accessibilityOverview
What This Skill Does
Configure Flutter for screen readers and assistive tech
Application
When to use this Skill
- Integrating flutter improving accessibility into your development workflow.
- Following best practices for configure flutter for screen readers and assistive tech.
- Automating repetitive tasks with AI-assisted tooling.
- Building production-grade applications with proper standards.
- Debugging and troubleshooting common implementation issues.
Documentation
Show Skills.md file
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).
Semantics: Use this to annotate the widget tree with a description of the meaning of the widgets. Assign specific roles using theSemanticsRoleenum (e.g., button, link, heading) when building custom components.MergeSemantics: Wrap composite widgets to merge the semantics of all descendants into a single selectable node for screen readers.ExcludeSemantics: Use this to drop the semantics of all descendants, hiding redundant or purely decorative sub-widgets from accessibility tools.
Web Accessibility
Recommendations
Explore other random skills
better-auth-best-practices
Configure Better Auth server and client, set up database adapters, manage sessions, add plugins, and handle environment variables. Use when users mention Better Auth, betterauth, auth.ts, or need to set up TypeScript authentication with email/password, OAuth, or plugin configuration.
email-and-password-best-practices
Configure email verification, implement password reset flows, set password policies, and customise hashing algorithms for Better Auth email/password authentication. Use when users need to set up login, sign-in, sign-up, credential authentication, or password security with Better Auth.
organization-best-practices
Configure multi-tenant organizations, manage members and invitations, define custom roles and permissions, set up teams, and implement RBAC using Better Auth's organization plugin. Use when users need org setup, team management, member roles, access control, or the Better Auth organization plugin.