Live tool
CT Lab · Accessibility Tooling
508 / WCAG 2.1 AA Auditor
A Two-Pass Compliance Audit Pipeline with Remediation Code
Executive Summary
This is a five-step agentic audit pipeline. It fetches a live page or accepts pasted HTML, runs two passes (structural plus contrast/ARIA), grades findings by severity, and produces copy-ready remediation code. Accessibility audits are usually manual, expensive, and late; this makes a structured audit available at any point in design or development. It runs on Flask + Railway with the Anthropic API.
Personally, this operationalizes 21+ years of making Section 508 compliance the default behavior, not a review step.
Problem Statement
508 and WCAG 2.1 AA compliance is legally required for federal contractors and broadly expected in enterprise software. Automated tools (axe, Lighthouse) catch mechanical failures (missing alt text, bad ratios), but miss structural and semantic issues: whether ARIA is used correctly in context, whether reading order is logical, whether custom components are keyboard operable. Manual audits are slow and happen too late. The gap: a tool that combines automated detection with AI-powered structural analysis, grades by severity, and produces ready-to-use remediation code.
Pipeline Architecture
Step 1 · Fetch
URL (live fetch) or pasted HTML. Scripts/styles stripped and HTML truncated to preserve semantic structure while cutting noise before the API call.
Step 2 · Parse
Structural parse of the DOM (heading hierarchy, landmarks, form labels, alt attributes, link text, table structure) into a semantic skeleton.
Step 3 · Contrast
Extracts text/background pairs, computes relative luminance per the WCAG 2.1 formula, flags AA (4.5:1 / 3:1) and AAA (7:1 / 4.5:1) failures with exact ratios.
Step 4 · ARIA
claude-sonnet evaluates ARIA in context: missing labels, incorrect roles, focus-management gaps, keyboard operability, announcement patterns. This is the second pass that automated tools can't do.
Step 5 · Remediate
Per finding, claude-sonnet generates remediation code scoped to the specific element, not generic boilerplate, plus a severity grade and an overall letter grade.
● Critical: blocks access● Warning: degrades experience● Info: best practice
Scope modes (Full, Contrast-only, ARIA-only) fit the audit to the workflow. Runs persist in
session; JSON export carries findings, grades, remediation code, and the overall grade. Stack:
Flask + Railway, claude-sonnet for analysis/remediation, claude-haiku for
contrast extraction and parse, httpx==0.27.0 pinned.
Design Decisions
Two-pass audit
The structure separates mechanical detection (ratios, attribute presence: deterministic) from semantic evaluation (ARIA correctness, reading order, keyboard flow: judgment). The second pass is exactly where AI adds value that automated tools can't replicate.
Remediation code as the primary output
A list of failures isn't useful to a developer; ready-to-paste, element-scoped code is. The goal is to close the gap between "finding" and "fix" as fast as possible.
Severity grading
A missing alt on a decorative image is Info; a modal that traps keyboard focus is
Critical. Grading lets teams prioritize: "3 critical, 7 warnings" is actionable; a raw count of 47
is paralyzing.
Personal foundation
This is informed by 21+ years of making 508 the default at LSI: the shared color-pairing library, a compliance-baked shell framework, treating accessibility as a system property rather than a review gate. The tool is that philosophy, operationalized.
What This Demonstrates
Deep accessibility expertise (two-pass design, severity grading, contextual ARIA evaluation), AI system design (multi-model routing, structured extraction, remediation generation), and a practical tooling philosophy: make accessibility the path of least resistance for teams by closing the gap between finding and fix.