flutter-accessibility-audit

Audits Flutter apps for accessibility issues and adds Semantics widgets and labels to source code.

Updated Jul 23, 2025
One-click install
npx skills add https://github.com/derrik-fleming/dotfiles --skill flutter-accessibility-audit-derrik-fleming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-accessibility-audit
Source: https://github.com/derrik-fleming/dotfiles/tree/main/private_dot_agents/skills/flutter-accessibility-audit
Command: npx skills add https://github.com/derrik-fleming/dotfiles --skill flutter-accessibility-audit-derrik-fleming

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter apps often ship with missing semantic labels, undersized tap targets, and poor contrast that make them unusable with screen readers and assistive technologies. This Skill guides you through auditing your app on Android, iOS, and Web, then fixing issues directly in the widget tree. ## Core Features & Use Cases - Platform-Specific Auditing: Step-by-step checklists for Android Accessibility Scanner, iOS Accessibility Inspector, and Chrome DevTools ARIA inspection on Flutter Web. - Automated Guideline Testing: Integrates Flutter's Accessibility Guideline API (tap target size, labeling, text contrast) into widget tests using tester.ensureSemantics(). - Semantics Tree Debugging: Uses debugDumpSemanticsTree() and SemanticsDebugger to locate missing labels or incorrect roles, then fixes them with Semantics, MergeSemantics, and SemanticsRole. - Use Case: Before releasing a Flutter app, run the audit checklist on each platform, add the automated a11y widget test to CI, and fix flagged widgets by wrapping them in properly labeled Semantics nodes. ## Quick Start Audit my Flutter app for accessibility issues and add Semantics widgets or labels wherever they are missing.

Frequently Asked Questions about flutter-accessibility-audit

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

FAQPage Schema
How do I test Flutter app accessibility automatically?▼

Use Flutter's Accessibility Guideline API in a widget test. Call tester.ensureSemantics(), pump your app, then assert against androidTapTargetGuideline, iOSTapTargetGuideline, labeledTapTargetGuideline, and textContrastGuideline using expectLater with meetsGuideline.

How to add semantic labels to custom Flutter widgets?▼

Wrap custom components in a Semantics widget and assign the appropriate SemanticsRole enum value to the role property, such as list or listItem. Standard widgets like TabBar and MenuAnchor provide automatic semantic roles, so prefer them when possible.

Does Flutter Web support accessibility and ARIA roles?▼

Yes, Flutter translates SemanticsRole values into corresponding ARIA roles in the HTML DOM, but web accessibility is disabled by default for performance. Enable it via the invisible 'Enable accessibility' button or programmatically with SemanticsBinding.instance.ensureSemantics() in main().

How do I debug the Flutter semantics tree?▼

Enable accessibility via a system tool or SemanticsDebugger, then invoke debugDumpSemanticsTree() to dump the tree to the console. Review the output for missing labels or incorrect roles, fix widgets with Semantics or MergeSemantics, and repeat until the tree matches the visual UI.

What are the minimum tap target sizes for Flutter accessibility?▼

Android requires a minimum tap target of 48x48 pixels, enforced by androidTapTargetGuideline, while iOS requires 44x44 pixels under iOSTapTargetGuideline. Text contrast must meet a 3:1 minimum ratio for large text per textContrastGuideline.