accessibility

Audits and remediates Flutter widgets against WCAG 2.2 conformance levels across six platforms.

162|23|Updated Feb 27, 2026
One-click install
npx skills add https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin --skill accessibility-verygoodopensource
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin/tree/main/skills/accessibility
Command: npx skills add https://github.com/VeryGoodOpenSource/vgv-ai-flutter-plugin --skill accessibility-verygoodopensource

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Flutter apps often ship with accessibility barriers—missing semantic labels, undersized touch targets, keyboard-inaccessible controls, and animations that ignore reduced-motion settings—because WCAG 2.2 compliance is hard to verify manually across iOS, Android, Web, macOS, Windows, and Linux. ## Core Features & Use Cases - Structured WCAG 2.2 Audits: Runs a four-phase workflow that captures the target conformance level (A, AA, AA + selected AAA, or AAA) and target platforms, then audits widgets across seven categories including semantics, touch targets, focus, contrast, text scaling, motion, and forms. - Actionable Findings with Fixes: Every finding cites the exact WCAG criterion ID and name, a CRITICAL/MAJOR/MINOR severity, and before-and-after Dart code, with per-platform severity adjustments. - Remediation with Regression Tests: Applies user-selected fixes and generates accessibility tests covering semantics, target sizes, focus management, and disableAnimations gating so fixes cannot regress. - Use Case: Point the skill at a checkout screen and receive a full audit report flagging a 16x16 GestureDetector close button as CRITICAL under WCAG 2.1.1, then have it replaced with a compliant IconButton and locked in with a widget test. ## Quick Start Ask the assistant to audit your Flutter widget files for WCAG 2.2 accessibility and specify your target conformance level and platforms when prompted.

Frequently Asked Questions about accessibility

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

FAQPage Schema
How do I audit a Flutter app for WCAG 2.2 accessibility?

Run the audit workflow, which first asks for your target conformance level (A, AA, AA + selected AAA, or AAA) and target platforms, then checks your widgets across seven categories. The output is a report where every finding cites the WCAG criterion, a severity, and before-and-after Dart fix code.

How do I make Flutter widgets accessible to screen readers?

Add semanticLabel to every Image, wrap icon-only buttons in Tooltip or Semantics(label:), and never use bare GestureDetector for tap targets since it is unreachable by keyboard and switch access. Cupertino widgets like CupertinoSwitch need explicit Semantics wrappers because their default semantics are weak.

What is the minimum touch target size in Flutter for WCAG 2.2?

WCAG 2.2 criterion 2.5.8 requires 24x24 CSS px minimum at Level AA, while 2.5.5 requires 44x44 at AAA. The VGV recommended minimum is 48x48 dp, and findings between 24 and 48 dp are flagged as style issues at AA.

Does Flutter accessibility work differently on iOS and Android?

Yes. On iOS, Semantics(liveRegion: true) does not auto-announce, so you must also call SemanticsService.announce, and text scaling should be tested at 3x rather than Android's 2x. Heading levels are binary on both platforms, while full heading hierarchy only works on web.

Why is Flutter Web accessibility not working by default?

Semantics are disabled by default on Flutter Web for performance. Call SemanticsBinding.instance.ensureSemantics() in main() when kIsWeb is true, otherwise screen readers only see an invisible enable-accessibility button.

How do I handle animations for users with reduced motion settings?

Gate every AnimationController, AnimatedContainer, Hero, and PageRouteBuilder transition on MediaQuery.of(context).disableAnimations, returning the child directly when the flag is true. This satisfies WCAG 2.3.3 and respects Reduce Motion on iOS, macOS, and Android.