@webability/mcp

@webability/mcp

An MCP server for web accessibility testing that enables scanning, auditing, and fixing WCAG, ADA, and other compliance issues directly from your IDE, with free local scans, AI-generated framework-aware fixes, and verification capabilities.

Category
访问服务器

README

@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 — accessibility widget, automated scanner, and AI agents for WCAG 2.1 / 2.2 AA, ADA, Section 508, EAA (European Accessibility Act) and AODA compliance. This MCP exposes the same accessibility-testing engine that powers the WebAbility widget and dashboard, so you can scan, audit and fix web accessibility issues (color contrast, ARIA, alt text, keyboard navigation, focus visibility, target size, and more) from your IDE while you build.

New to accessibility compliance? Start with the free WCAG & ADA accessibility checker, or read the WebAbility MCP docs and the getting-started guide.

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.

Why this over other accessibility MCPs

Most accessibility MCP servers stop at find and suggest. WebAbility closes the whole loop in your editor, and starts free:

  • Free, local scan — no account, no Docker. scan_page runs entirely on your machine. (Deque's axe MCP needs a paid subscription, an API key, and a Docker install just to analyze a page.)
  • Fixes that fit your stack. generate_ai_fix returns ready-to-paste code for the framework you actually use — Tailwind, MUI, Bootstrap, WordPress, Next.js — not generic guidance.
  • A vision pass DOM scanners can't do. visual_audit catches focus visibility, icon contrast, and "looks like a button but isn't" — issues axe-core structurally cannot see.
  • Verification, not just detection. verify_fix re-checks that your fix actually landed and returns verified: true/false. Every 2026 comparison of accessibility MCPs names this the biggest gap in the category — most tools never close it.
  • Evidence for compliance. start_audit produces a persistent, timestamped report and Excel workbook you can hand to an auditor — not a result that vanishes with your session.

The full cycle, without leaving the editor: scan_pagegenerate_ai_fixverify_fix, then start_audit when you need the paper trail.

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.
verify_fix Re-scan a fixed element and confirm the violation is gone — verified: true/false. Closes the find → fix → verify loop.
visual_audit Pixel-level audit via vision (icon contrast, focus visibility, looks-like-a-button-but-isn't)
start_audit Kick off the full server-side audit deliverable (report + Excel workbook). Returns an id to poll. Requires an account.
get_audit Check an audit's progress and, once complete, get the severity summary + report/workbook download URLs.
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?"

Privacy, scan logs & telemetry

Every scan is logged locally to ~/.webability/scans/ — a one-line-per-scan index.jsonl ledger plus the full result of your last 500 scans. Browse them with the scan_history tool ("what did we scan earlier?") or plain jq. Set WEBABILITY_SCAN_LOG=off to disable, WEBABILITY_SCAN_LOG_DIR to relocate.

The server also reports one small telemetry event per tool call (every tool, not just scans) to the WebAbility API: tool name, a short target label (URL, selector, issue type — never page content), pass/fail, duration, issue counts, and a persistent anonymous install ID. Full scan results, HTML, and generated fix code never leave your machine via telemetry. Set WEBABILITY_SCAN_TELEMETRY=off to opt out.

Two tools — generate_ai_fix and visual_audit — additionally send page content (an HTML snippet or a screenshot) to WebAbility's API so it can call a third-party LLM on your behalf; WebAbility doesn't store that content, but the LLM provider sees it in transit. See PRIVACY.md for the full per-tool breakdown and WebAbility's privacy policy.

Learn more

WebAbility platform & docs

Accessibility compliance guides

Accessibility by industry

Install the widget on your stack

Package

Keywords: web accessibility, accessibility testing, WCAG 2.2 AA, ADA compliance, Section 508, EAA, AODA, a11y, accessibility scanner, color contrast checker, ARIA validation, alt text, keyboard navigation, screen reader, MCP server, accessibility for AI coding agents.

License

MIT © WebAbility.io

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选