How I let Claude Code handle my accessibility compliance

说明与用途

使用 MCP 和 Claude Code 自动化可访问性检查，可快速检测、生成并验证 WCAG 修复，减少手动工作。

问题

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

结果

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.

工作流

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

证据

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.

来源

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).

来源

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

来源

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

来源