design-creative
Accessibility skill: Ship WCAG 2.2 AA, not vibes
Scenario-driven intro to the accessibility skill for fixing WCAG 2.2 AA issues with axe-core, keyboard, ARIA, and focus.
Where this fits
A developer is handed a Lighthouse report that says 31 violations and a client expectation of WCAG 2.2 AA. The accessibility skill steps in at that point: parse axe-core/Lighthouse findings, fix semantic and keyboard issues, and leave visual design to the design skill. It keeps the agent focused on conformance, not aesthetics.
Why agents benefit
- Distinguishes "bad contrast" from "bad visual intent" — it fixes WCAG AA failures, not taste.
- Replaces non-semantic elements with native HTML first; most ARIA bugs disappear.
- Enforces keyboard operability and focus management with concrete patterns, not generic advice.
- Tells the agent when to stop: test-runner setup goes to
testing-web, performance toperformance. - Provides a manual checklist for the 43% of WCAG issues automated scanners cannot catch.
Practical scenarios
Cleaning up a signup form after an axe-core audit
The agent reads violations: missing labels, duplicate IDs, empty buttons. It maps each issue to WCAG criteria, rewrites the markup, then re-scans to confirm the regression count drops.
Keyboard operability for a custom dropdown
A React dropdown built on divs isn't reachable. The agent converts it to a button group or adds a correct ARIA combobox pattern, ensuring arrow-key navigation and visible focus rings.
Contrast and tap-target fixes before a sprint review
Lighthouse flags AA contrast failures and 40px targets. The agent adjusts token-level color and spacing values. It doesn't redesign; it meets the threshold.
Add it to your agent workflow
Install once per project:
npx skills add ericrisco/rsc-harness --skill accessibility
Then ask: "Run an axe scan on the checkout page and remediate WCAG 2.2 AA violations." The agent can use the skill rules to classify findings, fix the syntax, and re-scan in the same loop. The full skill context is available at https://www.openagentskill.com/skills/ericrisco-accessibility when you want to inspect its boundaries.
Compare before adopting
Compare the skill's guidance with your current a11y flow. Quality signal: does it distinguish automated vs manual checks and cite WCAG criteria? Maintenance freshness: check the GitHub repository and commit history. Alternatives: could you work with axe-core directly? The design and testing-web skills complement it. Workflow fit: it should slot into your agent's existing tool definitions without new infrastructure.
Why it is worth tracking
With 58 stars and a clear origin in the RSC harness, this skill is early but focused. Its compact README gives an agent decision boundaries — what belongs to accessibility, design, testing-web, and performance — which is a strong quality signal for collaborative agent workflows. Track it if you do regular front-end audit loops; drop it if your stack already has another conformance skill with better maintenance.
Featured Skill
accessibility
Skill by ericrisco