Accessibility Gate

Ship interfaces everyone can actually use. Accessibility Gate turns your AI agent into a meticulous accessibility auditor that reviews your frontend code against WCAG 2.2, flags every violation with a severity and a concrete fix, and gates the broken patterns that lead to lawsuits, lost users, and failed compliance audits.

The Problem

Accessibility bugs are invisible until they are expensive. A missing alt attribute, a div masquerading as a button, a color contrast of 3.1:1, a form input with no label, a modal that traps focus the wrong way — none of these break the build, none fail a normal test, and none are caught in a quick design review. They surface as frustrated users who can't complete checkout, failed VPAT/Section 508 reviews, or a demand letter citing the ADA. By then the fix is a rushed, cross-cutting refactor instead of a one-line change.

What It Does

Accessibility Gate gives your agent a rigorous, repeatable audit procedure for every component and page:

1. WCAG Violation Scan — Reviews markup and components against WCAG 2.2 A/AA success criteria: semantics, names/roles/values, keyboard operability, focus management, and contrast.
2. Severity-Ranked Findings — Classifies each issue as Critical, Serious, Moderate, or Minor so you fix what actually blocks users first.
3. Concrete Fix, Not Just a Flag — For every finding, produces the corrected code snippet (the right ARIA, the semantic element, the label association, the focus order) so it's copy-paste ready.
4. Keyboard & Focus Audit — Traces tab order, focus traps, skip links, and visible focus states that automated scanners routinely miss.
5. Ship/No-Ship Gate — Emits a clear pass/fail summary you can wire into CI, so a build with Critical or Serious violations can be blocked before it merges.

Why Use This Skill

Automated scanners like axe or Lighthouse catch roughly a third of accessibility issues — the easy, machine-detectable ones. The hard majority (is this actually a button? does focus go somewhere sane? does this announce correctly to a screen reader?) require judgment. This skill encodes that judgment into a procedure your agent applies consistently, turning accessibility from an end-of-project panic into a quiet gate that runs on every change. It is cheaper than one hour of a consultant's time and far cheaper than one demand letter.

Supported Stacks

Frameworks: React / Next.js, Vue / Nuxt, Svelte / SvelteKit, Angular, and plain HTML/CSS. Standards: WCAG 2.0, 2.1, and 2.2 (Level A and AA); maps findings to Section 508 and EN 301 549. Workflow: Run ad hoc on a component, on a full directory, or as a pre-merge CI gate.

Use Cases

Gate every frontend PR so no Critical or Serious accessibility regression can merge. Run a full WCAG 2.2 AA audit on an existing app before a compliance or VPAT review. Fix accessibility debt component-by-component with concrete, prioritized changes. Teach a team accessible patterns by example, embedding the right fix in every review.

Known Limitations

Static analysis catches structural, semantic, and contrast issues; it cannot fully replace manual testing with a real screen reader and keyboard, which is recommended for final sign-off on critical flows. Contrast checks require resolvable color values; dynamic or image-based backgrounds may need a manual spot check.