Flutter accessibility

Skill almasumdev/awesome-flutter-agent-skills/.github/skills/ui/flutter-accessibility

Curated agent skills, conventions, and workflows for building Flutter apps with AI coding agents.

Install

npx -y skills add almasumdev/awesome-flutter-agent-skills --skill flutter-accessibility

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Auditing Flutter widgets for accessibility — Semantics labels, touch targets, contrast, dynamic type, and screen readers. Use this when reviewing UI for a11y compliance.

SKILL.md

2.7 KB, as published. Nobody here has run it

Flutter Accessibility (a11y)

Instructions

Accessibility is not optional. All interactive UI must be reachable by TalkBack/VoiceOver, operable by keyboard/switch control, and legible at large text scales.

1. Semantics Labels

Every image, icon button, or custom gesture detector needs a meaningful label.
Prefer the built-in tooltip / semanticLabel parameter on widgets (IconButton, Image) rather than wrapping in Semantics manually.

IconButton(
  icon: const Icon(Icons.favorite),
  tooltip: 'Add to favorites', // becomes the semantics label
  onPressed: _toggleFavorite,
)

Image.network(url, semanticLabel: 'Profile photo of ${user.name}')

Wrap custom tappable containers with Semantics(button: true, label: '...', onTap: ...) or, better, use InkWell/GestureDetector with a Semantics parent.

2. Minimum Touch Targets

Minimum 48×48 logical pixels for interactive elements (Material) / 44×44 (iOS HIG).
Use IconButton (built-in 48×48 hit area) instead of raw Icon + GestureDetector.

3. Color Contrast

Body text: contrast ratio ≥ 4.5:1.
Large text (≥18pt or ≥14pt bold): ≥ 3:1.
Non-text UI (icons, form outlines): ≥ 3:1.
Never rely on color alone to convey state — add an icon, label, or pattern.

4. Dynamic Type and Scaling

Use MediaQuery.textScalerOf(context) (Flutter 3.16+) or textScaleFactor to respect the user's font size.
Use TextTheme from the active Theme and avoid hardcoded fontSize.
Test at 200% text scale — layouts must not clip or overlap.

5. Focus and Keyboard

Ensure all interactive elements are in the focus traversal order. FocusTraversalGroup + OrderedTraversalPolicy for custom order.
Test with a physical keyboard (Tab, Shift+Tab, Space, Enter).

6. Announcements

Use SemanticsService.announce('Item added to cart', TextDirection.ltr) for transient events.
Use Semantics(liveRegion: true, ...) for status areas that update.

7. Auditing Checklist

Run the app with TalkBack (Android) and VoiceOver (iOS) enabled; every control is reachable and labeled.
flutter test with SemanticsTester verifies labels in widget tests.
Run Accessibility Scanner (Android) / Accessibility Inspector (Xcode) to catch contrast and target-size issues.
Test at 200% text scale, landscape, and split-screen.
No color-only indicators (error states have an icon and label).