accessibility-as-code

accessibility-as-code is a skill for Claude Code, Codex from zakariaf/Flutter-Skills. It costs 195 tokens per session (3,743 once invoked), scanned A, original, MIT.

A Flutter coding standard for building accessibility into every widget. Accessibility means making an app usable with screen readers, switch controls, larger text, and other assistive features.

In plain words
What is it for?
Adding labels and roles to controls and images, handling accessibility settings, and checking accessible behavior in widget code.
Why use it?
It prevents interactive controls, images, colors, and layout choices from excluding people who use assistive technology.

Skill for Claude CodeCodex

Part of the flutter plugin — 40 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/zakariaf/flutter-skills/accessibility-as-code
Any agent
npx skills add zakariaf/Flutter-Skills --skill accessibility-as-code
Clone the repo
git clone --depth 1 https://github.com/zakariaf/Flutter-Skills

Made for: Claude Code, Codex.

Or install flutter, the plugin that ships this one along with the rest of its 40 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for accessibility-as-code

README.md
[![agentmods](https://agentmods.dev/badge/skills/zakariaf/flutter-skills/accessibility-as-code.svg)](https://agentmods.dev/skills/zakariaf/flutter-skills/accessibility-as-code)
Your own site
<a href="https://agentmods.dev/skills/zakariaf/flutter-skills/accessibility-as-code"><img src="https://agentmods.dev/badge/skills/zakariaf/flutter-skills/accessibility-as-code.svg" alt="Measured on agentmods" height="20"></a>
Per session 195 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,743 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00195 $0.03743
Opus 5 $0.00097 $0.01871
Sonnet 5 $0.00039 $0.00749
Haiku 4.5 $0.00019 $0.00374

Measured 4d ago against content hash 121fc6ac78eb, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

accessibility-as-code scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/accessibility-as-code/SKILL.md · 219 lines

How it starts

The opening of the file, as written. The whole thing — 219 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Accessibility is a coding standard, not a checklist

Accessibility is authored into the widget as you write it — the same tier as "the button actually works." There is no lint for any of this: flutter_lints and very_good_analysis ship zero a11y rules. Enforcement is the widget itself, review of your own diff, and widget tests. Applies to every interactive View, every Icon/Image, every state, and every color choice.

Testing mechanics (guideline matchers, golden lanes, RTL, honest conformance limits) live in widget-golden-and-a11y-testing; this skill is the authoring discipline.

Non-negotiable rules

  1. Every interactive node gets Semantics(button: true, label: ...) — a raw GestureDetector with no semantics silently locks out every screen-reader and switch user. Correct semantics make TalkBack, VoiceOver, Switch Access and Switch Control work for free; it is definition-of-done, never a backlog ticket.
  2. Every Icon/Image gets a semanticLabel, or is wrapped in ExcludeSemantics because it is decorative. There is no third option — an unlabelled Icon is invisible to a screen reader.
  3. Read a11y state from MediaQuery at build time, never from app state. MediaQuery is an InheritedWidget with correct-by-construction invalidation; pushing it through a provider trades a compiler-guaranteed rebuild for a frame of staleness in the one area where being wrong is total failure.
  4. Never MediaQuery.withClampedTextScaling, never textScaleFactor. Both are clamping hacks that silently defeat the text-scale matrix while contrast and tap-target guidelines still pass green. Enforce with a source grep (see Anti-patterns).
  5. Never FittedBox, computed fontSize, or TextOverflow.ellipsis to make a label fit. They turn "doesn't fit at 200%" from a loud test failure into truncated or shrunk text on a device. Build flexible heights and let text wrap.
  6. Never encode state through color alone. Pair every stateful signal with at least one non-color channel — icon + text label + shape/pattern + position. Color-only state is invisible under invertColors, grayscale color-correction, and to every screen-reader user.
  7. Contrast is measured against the composited background in both themes — body/icon text ≥ 4.5:1 (AA 1.4.3), large/hero text ≥ 3:1 (AA) — large text never has to clear a higher bar than body. Never test against the nominal token color when a fill, gradient, or translucency sits between text and surface.
  8. Every interactive target is ≥ 44×44 logical pixels and single-tap. No long-press or precise-gesture-only affordances; hand-off and motor-impaired use demand a large forgiving target.
  9. Traversal order is authored with sortKey, never inherited from layout — visual position optimized for the thumb actively pessimises linear screen-reader/switch scanning.
  10. Honor boldText; keep haptics through reduced motion. Hardcoding fontWeight throws the setting away. Read disableAnimations from MediaQuery here, but resolve how motion collapses through design-system-structure's reduced-motion token + resolveMotion helper (that skill owns the mechanism) — an animation that still conveys meaning with no reduced-motion path is a bug.

Read the full file on GitHub · 219 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 219 lines · 195 tokens per session scan A 121fc6ac78eb

Subscribe to this mod's changes

accessibility-as-code is a skill published in the GitHub repository zakariaf/Flutter-Skills (2 stars, last pushed 6d ago), licensed MIT. It adds 195 tokens to every session and 3,743 once invoked, about $0.0010 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

desktop-brand-builder

Generate a branded Qwen Code desktop package from the Tauri desktop shell using a minimal brandId and logo. Use when the user wants a custom, white-label, or rebranded desktop client, installer, DMG/EXE/AppImage/deb, or one-click brand build on top of packages/desktop-shell.

QwenLM/qwen-code · 69 tokens

presentation-styling

Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation.

shanraisshan/claude-code-best-practice · 19 tokens

dataviz

Design guidance for charts, graphs, dashboards, maps, and data visualizations, including a local palette validator.

QwenLM/qwen-code · 26 tokens

frontend-design-saas

S-tier SaaS dashboard and product UI reference. Use this skill when building application shells, data tables, settings panels, billing pages, dashboards, auth flows, admin tools, or any internal/customer-facing SaaS product UI. Inspired by Stripe, Linear, Vercel, Airbnb, Notion. Covers neutral-led design tokens…

cloudflare/vibesdk · 105 tokens

frontend-design-landing-page

Marketing landing page and conversion-focused product page reference. Use this skill when building hero sections, feature grids, pricing pages, testimonials, CTAs, footers, navigation bars, or any public-facing marketing surface. Covers a warm, professional, developer-friendly design language (cream backgrounds…

cloudflare/vibesdk · 106 tokens

frontend-design

Produce intentional, responsive, accessible UI work and perform visual QA instead of generic component assembly.

Hmbown/CodeWhale · 21 tokens