# Flutter Accessibility Validator

> 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.

- Skill: `desquared/flutter-accessibility-validator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add desquared/flutter-accessibility-validator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/desquared/flutter-accessibility-validator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: desquared (https://skillmd.com/u/desquared)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/desquared/flutter-accessibility-validator

---


# Accessibility Skill

## Semantic Labels
```dart
// 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
```dart
import 'package:flutter/semantics.dart';
SemanticsService.announce('Button unlocked!', TextDirection.ltr);
```

## Touch Targets & Forms
```dart
// Minimum 48x48 dp
IconButton(iconSize: 48, ...)

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

## Color Contrast
```dart
// Use ColorPalette (WCAG-compliant)
Text('Text', style: TextStyle(
  color: ColorPalette.coloursBasicText.platformBrightnessColor(context),
))
```

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

## Testing
```dart
// 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