@webability/mcp

@webability/mcp

Accessibility testing MCP server for Cursor, VS Code Copilot, Claude Code, and any other MCP-compatible IDE.

What is WebAbility?

WebAbility.io is an AI-powered web accessibility platform — widget, scanner, and agents for WCAG 2.2 / ADA / Section 508 / EAA compliance. This MCP exposes the same scanning engine that powers the WebAbility widget and dashboard, so you can audit and fix accessibility issues from your IDE while you build.

The server registers an instructions block on initialize, so any MCP-compatible client picks up business context (what tool to call when, the three-tier output convention, etc.) automatically — no setup required beyond the install below.

Install

npm install -g @webability/mcp

Setup

Add to your IDE's MCP config:

{
  "mcpServers": {
    "webability": {
      "command": "webability-mcp"
    }
  }
}

Optional env: WEBABILITY_API_URL (default https://api.webability.io) for self-hosted backends.

Scan engines

scan_page runs three engines in parallel and deduplicates the results:

Engine	Rules	What it covers
WebAbility detectors	60+	Gradient-aware contrast, weak names, decorative icons, landmark hierarchy, ARIA correctness, link consistency, target size, keyboard traps
axe-core	104	Industry-standard WCAG 2.2 baseline
HTML_CodeSniffer	200+	Section 508 + WCAG techniques cross-reference

Three-tier output (since v1.2.1)

Every scan returns:

• issues — high-confidence violations, safe to surface as bugs
• incomplete — findings that need human review (contrast against gradients, marketing imagery, framer-motion pre-animation states, axe-incomplete). Never auto-fix these.
• summary — counts by severity + an incomplete count

This mirrors axe-core's violations / incomplete / passes split and prevents agents from "fixing" false positives in destructive ways.

Tools

Tool	What it does
scan_page	Scan a URL for WCAG accessibility issues (3 engines)
flow_scan	Multi-page journey scan with deduplicated issues across pages
scan_html	Scan a raw HTML snippet (no URL needed)
detect_framework	Detect Tailwind / MUI / Bootstrap / Next.js / WP / plain CSS
generate_ai_fix	Framework-aware fix alternatives. Auto-extracts brand palette from the live URL on contrast issues.
visual_audit	Pixel-level audit via vision (icon contrast, focus visibility, looks-like-a-button-but-isn't)
check_color_contrast	WCAG contrast check on a color pair; pass url to get brand-aligned suggestions from the live page
check_aria	Validate ARIA attributes in an HTML snippet
get_rules	List axe-core rules with optional WCAG tag filter
find_source	Map a CSS selector back to local source files

When to use this MCP

• Building a new component and want it accessible from day one
• Auditing a localhost / staging build before pushing
• Triaging a Lighthouse / axe report — scan_page consolidates all three engines
• Generating fix suggestions that match the framework you're already using
• Checking color contrast against the user's actual brand palette (not generic suggestions)

Examples

In Cursor / Claude Code:

"Scan localhost:3000 for accessibility issues"

"Walk login → dashboard → checkout and report unique issues across the flow"

"Suggest a fix for the contrast issue on .btn-primary on https://example.com — match their brand colors"

"What does WCAG 1.4.11 check?"

Links

• WebAbility — platform, widget, dashboard
• Documentation
• GitHub

License

MIT