accessibility-as-code

Enforces Flutter accessibility rules for semantics, text scaling, contrast, and tap targets.

Updated Aug 22, 2026
One-click install
npx skills add https://github.com/zakariaf/NearlyStop --skill accessibility-as-code-zakariaf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-as-code
Source: https://github.com/zakariaf/NearlyStop/tree/main/.claude/skills/accessibility-as-code
Command: npx skills add https://github.com/zakariaf/NearlyStop --skill accessibility-as-code-zakariaf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter ships zero accessibility lint rules, so screen-reader support, text scaling, contrast, and tap-target correctness are silently broken unless authored into every widget by hand. This Skill turns accessibility into a coding standard enforced at authoring time and in review, rather than a backlog ticket. ## Core Features & Use Cases - Semantics authoring rules: Every interactive node gets Semantics(button: true, label), every Icon/Image gets a semanticLabel or ExcludeSemantics, and traversal order is set with OrdinalSortKey instead of layout position. - Text-scale and state discipline: Bans MediaQuery.withClampedTextScaling, textScaleFactor, FittedBox, and ellipsis on labels; requires reading boldText/disableAnimations from MediaQuery and encoding state through non-color channels. - Contrast and target verification: Enforces 4.5:1 body / 3:1 large-text contrast against composited backgrounds in both themes, plus 44x44 single-tap targets. - Use Case: When adding a GestureDetector or Icon to a Flutter View, apply the wrong/right ItemTile patterns and the definition-of-done checklist so TalkBack, VoiceOver, and Switch Access work without a retrofit. ## Quick Start Review this Flutter widget diff and rewrite any tap targets, icons, or text that violate the accessibility-as-code rules.

Frequently Asked Questions about accessibility-as-code

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

FAQPage Schema
How do I make a Flutter GestureDetector accessible to screen readers?

Wrap it in a Semantics widget with button: true and a display-only label so TalkBack and VoiceOver announce it. Add an OrdinalSortKey for traversal order, ensure the target is at least 44x44 logical pixels, and use HitTestBehavior.opaque so the whole cell is tappable.

Why should I avoid MediaQuery.withClampedTextScaling in Flutter?

withClampedTextScaling silently disables the user's text-scale setting while contrast and tap-target checks still pass, so the failure is invisible. The same applies to textScaleFactor, FittedBox, and TextOverflow.ellipsis; build flexible heights and let text wrap instead.

Does MediaQuery.highContrastOf work on Android?

No, MediaQuery.highContrastOf is iOS-only and always returns false on Android. Read the flag opportunistically but never gate features on it; provide an in-app contrast or theme control as the mechanism that works on every platform.

How do I show selected state without relying on color alone?

Pair the color with at least one non-color channel: a shape-distinct icon, a localized text label, an outline or pattern, or position. Expose the state to assistive technology through a Semantics value or liveRegion so screen readers announce it.

What contrast ratio does Flutter text need for WCAG compliance?

Body text and meaningful icons need at least 4.5:1 (WCAG AA 1.4.3) and large or hero text at least 3:1, measured against the composited background in both light and dark themes. Never measure against the nominal token when a fill, gradient, or translucency sits behind the text.