accessibility
Skill1 starsChanged 3 months agoMITView on GitHub
WCAG 2.1 AA as hard gates plus the testing workflow that proves them — contrast, keyboard, focus, screen readers, ARIA, dark mode re-verification. Use when building or reviewing any interactive UI, wiring up axe, testing keyboard navigation, fixing focus traps, or choosing ARIA attributes.
123 other projects use a version of this.
Adopted by
Most recently taken up by
- Khan/perseustheir own version, first seen Nov 9, 2026
- linx-systems/clamuitheir own version, first seen Nov 9, 2026
- Rojios/everything-claude-codetheir own version, first seen Nov 8, 2026
- ahmadvahidi/skill-atlastheir own version, first seen Nov 8, 2026
- GstMirabal/Token-Optimized-Agent-Pipelinetheir own version, first seen Nov 8, 2026
- DnsQueen/orcinus-skillstheir own version, first seen Nov 8, 2026
Used with
Projects with it also use author-contributions, tool-rename-deprecation and 10 more.
Other files people use alongside this one.
Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
MicrosoftSkillauthor-contributions
Identify all files a specific author contributed to on a branch vs its upstream, tracing code through renames. Use when asked who edited what, what code an author contributed, or to audit authorship before a merge. This skill should be run as a subagent — it performs many git operations and returns a concise table.
Also in 7 projects that use this
gitpod-ioSkilltool-rename-deprecation
Ensure renamed built-in tool references preserve backward compatibility. Use when renaming a toolReferenceName, tool set referenceName, or any tool identifier. Run on ANY change to tool registration code. Covers legacyToolReferenceFullNames for tools and legacyFullNames for tool sets.
Also in 5 projects that use this
DepressionCenterSkillproject-preferences
Apply repository-specific preferences when planning, implementing, or reviewing changes in this project.
Also in 6 projects that use this
- MicrosoftSkill
chat-perf
Run chat perf benchmarks and memory leak checks against the local dev build or any published VS Code version. Use when investigating chat rendering regressions, validating perf-sensitive changes to chat UI, or checking for memory leaks in the chat response pipeline.
Also in 5 projects that use this
- DepressionCenterSkill
create-media-pack
Create a coordinated project branding and media pack with three accessible design options, approved vector artwork, image exports, a branding guide, and README integration. Use when asked for a repository media pack, brand kit, or complete project visual identity.
Also in 5 projects that use this
- +7 more from microsoft
Other versions123 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 123
- microsoft/vscode★ 195ksame name
- elastic/kibana★ 21ksame name
- mozilla-mobile/firefox-ios★ 13ksame name
- midudev/preguntas-entrevista-react★ 7.8ksame name
- gitpod-io/openvscode-server★ 6.2ksame name
- posit-dev/positron★ 4.3ksame name
- legions-developer/evilcharts★ 3.2ksame name
- midudev/la-velada-web-oficial★ 1.9ksame name
- UI5/webcomponents★ 1.8ksame name
- theopenco/llmgateway★ 1.7ksame name
113 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository14 other files it gives its agents.
- colorSkill
- content-designSkill
- design-reviewSkill
- design-systemSkill
- implementation-reviewSkill
- interaction-designSkill
- layoutSkill
- measurementSkill
- motionSkill
- product-evidenceSkill
- product-framingSkill
- typographySkill
- validationSkill
- visual-directionSkill
The file
We split this skill into the rules it gives an agent
1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.
0
Common
Most of the 112 edited versions we read keep these.
1
Distinctive
This author's own choices. Worth a look.
0
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Distinctive: line 26
Do not write tokens that produce failing contrast.
“Common” is measured: kept by at least 6 in 10 of the 112 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Accessibility
Accessibility is a constraint at decision time, not a final gate. The contrast rule binds when the palette is chosen, the keyboard rule when the component is specced, the focus rule when the flow is drawn. The audit at the end confirms what was designed in; it cannot retrofit what wasn't. A component failing any applicable rule is broken the same way a component that crashes is broken; ship neither.
The rules — WCAG 2.1 AA minimum, plus marked house gates
| Rule | Requirement |
| Text contrast | 4.5:1 for normal text, 3:1 for large text. WCAG large text is 18pt/24px+, or 14pt/~18.7px bold — 18px regular is normal text and needs 4.5:1 |
| UI component contrast | 3:1 against adjacent background |
| Focus visible | Ring at 3:1 contrast vs adjacent colors, at least 2px |
| Touch targets | Minimum 44×44px for all interactive elements (house gate; WCAG puts this at AAA 2.5.5) |
| Reduced motion | prefers-reduced-motion: reduce disables all non-functional animation |
| Color alone | Error, warning, success never rely on color alone: add icon or text |
| Focus order | Logical tab order matching visual layout |
| ARIA labels | Icon-only buttons get aria-label; inputs get an associated <label> |
| Form errors | Associated with the input via aria-describedby, aria-invalid set |
| Live regions | Dynamic updates announce via aria-live or role="status" / role="alert" |
| Full-height | 100dvh, never 100vh (mobile browser chrome) — house gate, not WCAG |
Do not write tokens that produce failing contrast. Fixing contrast after the palette exists means redesigning the palette; check while choosing.
The five ARIA mistakes that cause most damage
role="button"on a<div>: adds the role, not the keyboard behavior. Use<button>. Always.aria-labelon non-interactive elements: ignored by screen readers there. Use visible text or an.sr-onlyspan.aria-hidden="true"on focusable elements: creates a ghost stop the user can Tab to but can't hear. Useinerton the container.role="presentation"on semantic elements: strips the children's semantics too. A<table>with it becomes invisible to screen readers.aria-expandedset once and never toggled: announces "collapsed" forever. Bind it to state.
Minimum verification before shipping
- Automated: axe (component tests or the DevTools extension), zero violations, each meaningful state tested, not just default.
- Keyboard: unplug the mouse. Tab reaches everything, Escape closes overlays and returns focus to the trigger, arrows work in menus and tabs. Focus never lands on
<body>. - Contrast: DevTools color picker on real rendered colors, both themes. Dark mode re-checks every ratio; a muted gray passing on white routinely fails on dark gray.
- Screen reader: one pass with VoiceOver on the changed flow. Every control announces role + name + state.
references/testing.md carries the full workflow: axe setup and its false positives, the complete keyboard matrix, focus trap rules, the VoiceOver command table, aria-live usage, and the dark-mode token table.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.