skills.rest
Wishtohear
WishtohearCOMMUNITY
Explore all skills by this author →
GitHub

flutter-improving-accessibility

Configures Flutter apps to support screen readers and assistive technologies.

1|Updated Apr 30, 2026
Search Tags:#accessibility#screen reader#wcag#flutter#dart#semantics#aria
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-improving-accessibility-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-improving-accessibility
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-improving-accessibility
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-improving-accessibility-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter apps often fail accessibility requirements: text clips at large OS font sizes, tap targets are too small, custom widgets are invisible to screen readers like TalkBack and VoiceOver, and Flutter web exposes no semantics to browsers by default. ## Core Features & Use Cases - Semantics Widgets: Annotate custom widgets with Semantics and SemanticsRole, group composite widgets with MergeSemantics, and hide decorative elements with ExcludeSemantics. - Design Compliance: Enforce 48x48 pixel tap targets, 4.5:1 color contrast ratios, and layouts that survive maximum OS font scaling. - Web Accessibility: Programmatically enable the Flutter web semantics tree via SemanticsBinding.instance.ensureSemantics() so ARIA roles map correctly. - Use Case: When building a custom list item in a Flutter app, wrap it in Semantics with role: SemanticsRole.listItem so screen readers announce it correctly on mobile and web. ## Quick Start Review my Flutter widget tree and add the Semantics annotations, tap target sizing, and contrast fixes needed to make it accessible to screen readers.

Frequently Asked Questions about flutter-improving-accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a Flutter app accessible to screen readers?▼

Wrap interactive and custom widgets in the Semantics widget and assign an appropriate SemanticsRole such as button, link, or heading. Use MergeSemantics to group composite widgets into one node and ExcludeSemantics to hide decorative elements from TalkBack and VoiceOver.

How do I enable accessibility in Flutter web?▼

Flutter web disables semantics by default for performance. Call SemanticsBinding.instance.ensureSemantics() before runApp when kIsWeb is true to force generation of the semantics tree and expose ARIA roles to browsers.

What is the minimum tap target size in Flutter accessibility?▼

Interactive elements should have a minimum tap target of 48x48 logical pixels to accommodate users with limited dexterity. Verify this during development and test layouts at maximum OS font sizes to prevent clipping.

What color contrast ratio does Flutter accessibility require?▼

Follow W3C standards: at least 4.5:1 contrast for small text and 3.0:1 for large text, defined as 18pt regular or 14pt bold and above. Validate ratios when finalizing each view or component.

Why is my custom Flutter widget not announced by screen readers?▼

Custom widgets have no implicit semantics, so assistive technologies skip them. Wrap the widget in Semantics with an explicit label and SemanticsRole, and use MergeSemantics if it contains multiple child widgets that should read as one unit.

Related Skills

Explore More Software Engineering Skills→
coco-decoco-de

flutter-a11y

Analyze Flutter widget trees for accessibility issues and WCAG compliance.

Official
Intermediate
civictechdccivictechdc
1

screen-reader-testing

Tests screen-reader accessibility in web apps across major platforms and browsers using VoiceOver, NVDA, JAWS, TalkBack checklists.

Official
Intermediate
alexzhang1030alexzhang1030

i-adapt

Adapt existing designs across screen sizes and interaction contexts.

Community
Advanced
HabitaNexusHabitaNexus
1

Native Integration (Swift/Kotlin)

Integrate Flutter apps with native iOS Swift and Android Kotlin APIs.

Official
Advanced