flutter-accessibility-validator

name	flutter-accessibility-validator
description	Use when creating or modifying Flutter UI components, screens, or widgets, or when the user asks about accessibility, screen reader support, VoiceOver, TalkBack, touch targets, color contrast, or WCAG compliance in a Flutter app.
metadata	{"author":"Desquared"}

Accessibility Skill

Semantic Labels

// Icons & buttons
Semantics(label: 'Settings', button: true, child: Icon(Icons.settings))

// Images (or ExcludeSemantics if decorative)
Semantics(label: 'Profile picture', image: true, child: Image.network(url))

// Interactive (prefer InkWell over GestureDetector)
Semantics(button: true, label: 'Open', child: InkWell(...))

Dynamic Announcements

import 'package:flutter/semantics.dart';
SemanticsService.announce('Button unlocked!', TextDirection.ltr);

Touch Targets & Forms

// Minimum 48x48 dp
IconButton(iconSize: 48, ...)

// Forms need labels
TextField(decoration: InputDecoration(
  labelText: 'Email',
  errorText: isValid ? null : 'Invalid',
))

Color Contrast

// Use ColorPalette (WCAG-compliant)
Text('Text', style: TextStyle(
  color: ColorPalette.coloursBasicText.platformBrightnessColor(context),
))

Focus Management

FocusTraversalGroup(
  policy: OrderedTraversalPolicy(),
  child: Column(children: [
    FocusTraversalOrder(order: NumericFocusOrder(1), child: TextField(...)),
    FocusTraversalOrder(order: NumericFocusOrder(2), child: Button(...)),
  ]),
)

Testing

// Automated
await expectLater(tester, meetsGuideline(textContrastGuideline));
await expectLater(tester, meetsGuideline(androidTapTargetGuideline));

Checklist

• Semantic labels on interactive elements
• Touch targets ≥ 48x48 dp
• Contrast ≥ 4.5:1 (text), 3:1 (UI)
• Forms have labels + errors
• Dynamic changes announced
• Logical focus order
• Tested with VoiceOver + TalkBack

---

Source: Desquared/agents-rules-skills — distributed by TomeVault.