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.

Источник