Web Accessibility Testing MCP

Product Introduction

1. Definition: Web Accessibility Testing MCP (A11y MCP) is a Model Context Protocol server that bridges LLMs with automated web accessibility auditing tools. It falls under the technical category of AI-powered accessibility compliance middleware.
2. Core Value Proposition: It enables LLMs to programmatically conduct WCAG compliance checks, eliminating manual accessibility audits and accelerating inclusive web development through Deque Axe-core and Puppeteer integration.

Main Features

1. URL Accessibility Testing: Scans live web pages via Puppeteer browser automation. Axe-core executes WCAG rule checks (2.0/2.1/2.2) and returns violations with HTML snippets, impact scores, and remediation guidance.
2. HTML Snippet Validation: Tests raw HTML strings in headless Chromium instances. Supports custom tag filtering (e.g., wcag2aa) to isolate specific compliance criteria like color contrast or ARIA attributes.
3. Color Contrast Analyzer: Computes WCAG-compliant luminance ratios using Axe-core’s color algorithm. Accepts HEX/RGB inputs, font size, and weight to verify AA/AAA compliance dynamically.
4. ARIA Validator: Detects incorrect ARIA role-attribute pairings in HTML payloads. Flags mismatches like aria-pressed on non-toggle elements using Deque’s rule library.
5. Orientation Lock Detection: Identifies viewport meta tags forcing device orientation (e.g., orientation=portrait), violating WCAG 1.3.4.

Problems Solved

1. Pain Point: Manual accessibility testing delays development cycles. A11y MCP automates WCAG audits with 99.3% test coverage via Axe-core’s 130+ rules.
2. Target Audience:
   • Frontend developers embedding accessibility into CI/CD pipelines
   • QA engineers automating compliance reports
   • Content teams verifying CMS output accessibility
3. Use Cases:
   • Real-time accessibility feedback during LLM-generated code reviews
   • Batch testing marketing landing pages for AA compliance
   • Validating user-generated content against WCAG 2.2 criteria

Unique Advantages

1. Differentiation: Unlike SaaS scanners (e.g., Lighthouse), A11y MCP offers direct LLM integration via MCP protocol, enabling conversational accessibility debugging (e.g., "Fix contrast errors in this component").
2. Key Innovation: Puppeteer-powered execution environment simulating actual browser conditions, catching dynamic violations missed by static analyzers.

Frequently Asked Questions (FAQ)

1. How does A11y MCP integrate with Claude AI?
   Configure claude_mcp_settings.json to route accessibility queries via npx a11y-mcp-server, enabling Claude to run WCAG tests via natural language commands.
2. Can it test password-protected or local websites?
   No. The current version requires publicly accessible URLs due to Puppeteer’s network sandboxing.
3. What WCAG versions does Axe-core support?
   Axe-core 4.10.3 covers WCAG 2.0/2.1/2.2 Level A/AA rules, including newer success criteria like 1.4.13 (Content on Hover).
4. Is Docker deployment supported?
   Yes. Prebuilt Docker images include Puppeteer dependencies for seamless deployment in CI environments.
5. How are color contrast results calculated?
   Axe-core’s APCA algorithm computes contrast ratios while accounting for font weight/size, returning precise pass/fail status against WCAG 2.2 thresholds.