Accessibility
Guides Claude through accessibility work using WCAG's POUR principles and a practical 8-step audit checklist.
What it does
Gives Claude a consistent framework for accessibility (a11y) tasks. It uses WCAG's four principles — Perceivable, Operable, Understandable, Robust (POUR) — as the audit lens for classifying every issue, then walks a concrete 8-step checklist: keyboard traversal → screen reader names/roles/announcements → contrast and color-only meaning → semantic structure and reading order → form labels and error recovery → target size and timing → media captions and reduced motion → 200% zoom reflow.
Deeper material is split into on-demand reference files: W3C COGA's eight cognitive-accessibility objectives, and motion/sensory/older-user guidance with prefers-reduced-motion patterns. The scope boundary is explicit — context-based exclusion (language, culture, cheap devices, slow networks) is handed off to the sibling inclusive-design skill.
Who it's for
- Frontend or Flutter developers asked to "make this accessible" without a clear starting point
- QA engineers and designers who know axe/Lighthouse scores only catch about a third of issues
- Teams codifying accessibility standards into a design system or component library
- Projects with WCAG conformance obligations (public sector, finance, education)
Example uses
- "Audit this checkout form for accessibility" — surfaces missing labels, placeholder-only fields, and color-only error states, grouped by POUR principle.
- "Fix the focus handling in this modal" — checks focus order, focus return on close, ESC behavior, and whether dynamic changes are announced to screen readers.
- "Users say our page transitions make them dizzy" — applies
prefers-reduced-motionpatterns and the sub-3-flashes-per-second photosensitivity limit to propose a fix.
· · · Install guide · · ·
Try it now, no install
Paste this into Claude to use the skill without installing anything.
Read the instructions in this file and follow them to help me: https://raw.githubusercontent.com/evanca/flutter-ai-rules/HEAD/skills/accessibility/SKILL.md What I want: (describe your task here)
If Claude can't open the link, open it yourself and paste the contents instead.
↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.
Install in the Claude app (no terminal)
- Download the ZIP with the button below.
- In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
- Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
Install in Claude Code
Let Claude do it — paste this into Claude Code
Install the skill I found on Claude Skill Mart. Copy the skills/accessibility folder from the GitHub repo evanca/flutter-ai-rules into my ~/.claude/skills/evanca-accessibility/. When it's done, tell me in one line what this skill can do.
Install with a command instead
git clone https://github.com/evanca/flutter-ai-rules.git && mkdir -p ~/.claude/skills && cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/⚠ This is a third-party skill. Check the source repository before installing.
- Open a terminal.
- Create the skills directory if needed:
mkdir -p ~/.claude/skills - Clone the repository:
git clone https://github.com/evanca/flutter-ai-rules.git - Copy just this skill:
cp -r flutter-ai-rules/skills/accessibility ~/.claude/skills/ - (Recommended) also copy the sibling skill it defers to:
cp -r flutter-ai-rules/skills/inclusive-design ~/.claude/skills/ - Verify that
~/.claude/skills/accessibility/references/contains the reference markdown files. - Restart Claude Code and try a prompt like "run an a11y audit on this screen" — the skill should trigger automatically.