What can you do with this server?

The A11y MCP Server enables LLMs to perform comprehensive web accessibility testing using Axe-core and Puppeteer. Key capabilities include: * Test live web pages - Analyze any public URL for accessibility issues and WCAG compliance violations * Test HTML snippets - Evaluate raw HTML strings for accessibility problems without needing a live URL * WCAG compliance testing - Check content against various WCAG standards (2.0, 2.1, 2.2 at levels A, AA, AAA) with customizable tag filtering * Color contrast analysis - Verify if foreground/background color combinations meet WCAG contrast requirements for different font sizes and weights * ARIA attribute validation - Ensure ARIA attributes are being used correctly in HTML content * Orientation lock detection - Identify if content forces specific screen orientations (portrait/landscape) * Rule exploration - Get detailed information about available Axe-core accessibility rules with optional filtering * Detailed violation reports - Receive comprehensive JSON-formatted results including violations, passes, affected nodes, impact levels, descriptions, and remediation guidance

Which integrations are available for this server?

Provides instructions for configuring the MCP server on Linux through Claude's settings files Explains how to configure the MCP server on macOS by editing the Claude Desktop configuration file Uses Puppeteer to automate browser testing for web accessibility by loading and analyzing web pages

How do I use A11y MCP Server?

1. Click on "Install Server". 2. Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state. 3. In the chat, type @ followed by the MCP server name and your instructions, e.g., "@A11y MCP Server test our homepage https://example.com for WCAG 2.1 compliance" That's it! The server will respond to your query, and you can continue using it as needed. Here is a step-by-step guide with screenshots.

A11y MCP Server by ronantakizawa

https://github.com/user-attachments/assets/316c6d44-e677-433e-b4d5-63630b4bab2b

A11y MCP is an MCP (Model Context Protocol) server that gives LLMs access to web accessibility testing APIs.

This server uses the Deque Axe-core API and Puppeteer to allow LLMs to analyze web content for WCAG compliance and identify accessibility issues.

NOTE: This is not an official MCP server from Deque Labs.

Leave a star if you enjoyed the project! 🌟

Features

Test web pages: Test any public URL for accessibility issues
Test HTML snippets: Test raw HTML strings for accessibility issues
WCAG compliance testing: Check content against various WCAG standards (2.0, 2.1, 2.2)
Customizable tests: Specify which accessibility tags/standards to test against
Rule exploration: Get information about available accessibility rules
Color contrast analysis: Check color combinations for WCAG compliance
ARIA validation: Test proper usage of ARIA attributes
Orientation lock detection: Identify content that forces specific screen orientations

Related MCP server: Web Accessibility MCP Server

Installation

To use this server with Claude Desktop, you need to configure it in the MCP settings:

For macOS: Edit the file at '~/Library/Application Support/Claude/claude_desktop_config.json'

{ "mcpServers": { "a11y-accessibility": { "command": "npx", "args": [ "-y", "a11y-mcp-server" ] } } }

For Windows: Edit the file at %APPDATA%\Claude\settings\claude_mcp_settings.json

For Linux: Edit the file at ~/.config/Claude/settings/claude_mcp_settings.json Replace /path/to/axe-mcp-server/build/index.js with the actual path to your compiled server file.

Available Tools

test_accessibility

Tests a URL for accessibility issues.

Parameters:

url (required): The URL of the web page to test
tags (optional): Array of WCAG tags to test against (e.g., ["wcag2aa"])

Example

{ "url": "https://example.com", "tags": ["wcag2aa"] }

test_html_string

Tests an HTML string for accessibility issues. Parameters:

html (required): The HTML content to test
tags (optional): Array of WCAG tags to test against (e.g., ["wcag2aa"])

Example

{ "html": "<div><img src='image.jpg'></div>", "tags": ["wcag2aa"] }

get_rules

Get information about available accessibility rules with optional filtering.

check_color_contrast

Check if a foreground and background color combination meets WCAG contrast requirements.

Parameters:

foreground (required): Foreground color in hex format (e.g., "#000000")
background (required): Background color in hex format (e.g., "#FFFFFF")
fontSize (optional): Font size in pixels (default: 16)
isBold (optional): Whether the text is bold (default: false)

Example

{ "foreground": "#777777", "background": "#EEEEEE", "fontSize": 16, "isBold": false }

check_color_contrast

Check if ARIA attributes are used correctly in HTML.

Parameters:

html (required): HTML content to test for ARIA attribute usage

Example

{ "html": "<div role='button' aria-pressed='false'>Click me</div>" }

check_orientation_lock

Check if content forces a specific orientation.

Parameters:

html (required): HTML content to test for orientation lock issues

Example

{ "html": "<html><head><meta name='viewport' content='width=device-width, orientation=portrait'></head><body>Content</body></html>" }

Response Format

The server returns accessibility test results in a structured JSON format:

{ "violations": [ { "id": "color-contrast", "impact": "serious", "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds", "help": "Elements must meet minimum color contrast ratio thresholds", "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast", "affectedNodes": [ { "html": "<div style=\"color: #aaa; background-color: #eee;\">Low contrast text</div>", "target": ["div"], "failureSummary": "Fix any of the following: Element has insufficient color contrast of 1.98 (foreground color: #aaa, background color: #eee, font size: 12.0pt, font weight: normal)" } ] } ], "passes": 1, "incomplete": 0, "inapplicable": 2, "timestamp": "2025-04-25T16:45:33.655Z", "url": "about:blank", "testEngine": { "name": "axe-core", "version": "4.10.3" }, "testRunner": { "name": "axe" }, "testEnvironment": { "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/135.0.0.0 Safari/537.36", "windowWidth": 800, "windowHeight": 600, "orientationAngle": 0, "orientationType": "portrait-primary" } }

Dependencies

@modelcontextprotocol/sdk
puppeteer
@axe-core/puppeteer
axe-core

A11y MCP Server

Features

Installation

Available Tools

test_accessibility

test_html_string

get_rules

check_color_contrast

check_color_contrast

check_orientation_lock

Response Format

Dependencies

Resources

Tools

Appeared in Searches

New MCP Servers

Latest Blog Posts

MCP directory API

Web Accessibility-Testing MCP Server (A11y MCP)

Features

Installation

Available Tools

test_accessibility

test_html_string

get_rules

check_color_contrast

check_color_contrast

check_orientation_lock

Response Format

Dependencies

Resources

Tools

Appeared in Searches

New MCP Servers

Latest Blog Posts

MCP directory API