How I let Claude Code handle my accessibility compliance

Description and use

Automating accessibility checks with MCP and Claude Code enables rapid detection, generation, and verification of WCAG fixes, reducing manual effort.

Problem

WebAbility.io needed automated accessibility fixes but existing tools only produced reports, requiring manual code changes.

Outcome

The integrated MCP and Claude Code workflow automated the detection, suggestion, and verification of accessibility fixes, reducing manual effort and improving confidence that issues were resolved.

Workflow

• Configure MCP server URL in the chosen client (Cursor, VS Code, Claude, etc.).
• Run a scan with scan_page on the target page.
• Review the output: high‑confidence issues, incomplete items, and summary.
• For mechanical fixes, let the agent edit the file directly; for contextual or visual fixes, use generate_ai_fix to produce framework‑aware suggestions.
• Apply the suggested changes and run verify_fix on each modified element to confirm the issue is resolved.
• If verification fails, iterate by adjusting the fix and re‑verifying.
• Optionally use diff_scan to compare before and after scans and ensure no regressions.
• Use webability-tunnel to scan a local dev server when the MCP is hosted.
• Commit changes after human review of all applied fixes.

Evidence

Most accessibility tools stop at a report. You get a score and a list. Someone still has to read each finding, find the file, and write the change in the right framework.

Source

The server runs three engines and deduplicates the results into one list: WebAbility detectors (60+ rules), axe-core (104 rules), and HTML_CodeSniffer (200+ rules).

Source

After a change, a re‑scan says if the issue is gone. You do not rely on the agent's claim that it worked.

Source

Run webability-tunnel --port 3000 and the hosted tools can scan the app you are building, before you push anything.

Source