Back to Blog

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.

OpenAgentSkillPublished:

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 to performance.
  • 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

Accessibility skill: Ship WCAG 2.2 AA, not vibes | OpenAgentSkill