https://github.com/ronantakizawa/a11ymcp
Verified MCP Server for Web Accessibility Testing (1000+ Downloads)
https://github.com/ronantakizawa/a11ymcp
a11y a11y-testing accessibility-testing mcp
Last synced: 3 months ago
JSON representation
Verified MCP Server for Web Accessibility Testing (1000+ Downloads)
- Host: GitHub
- URL: https://github.com/ronantakizawa/a11ymcp
- Owner: ronantakizawa
- License: mit
- Created: 2025-04-25T17:31:57.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-06-20T05:57:57.000Z (4 months ago)
- Last Synced: 2025-06-20T06:35:14.314Z (4 months ago)
- Topics: a11y, a11y-testing, accessibility-testing, mcp
- Language: JavaScript
- Homepage: https://smithery.ai/server/@ronantakizawa/a11ymcp
- Size: 406 KB
- Stars: 9
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-mcp-servers - ronantakizawa/a11ymcp - core API and Puppeteer. (🌐 Browser Automation & Web Scraping)
- awesome-AI-driven-development - Web Accessibility-Testing MCP Server - An MCP (Model Context Protocol) server that gives LLMs access to web accessibility testing APIs (MCP Servers & Integrations / Other IDEs)
- mcp-index - A11y MCP - Run WCAG compliance tests and accessibility assessments using the axe-core API. Users can test raw HTML or URLs for accessibility issues and color contrast evaluation. (Developer Tools)
README
# Web Accessibility-Testing MCP Server (A11y MCP)
[](https://mseep.ai/app/ronantakizawa-a11ymcp)
[](https://smithery.ai/server/@ronantakizawa/a11ymcp)
[](https://mseep.ai/app/01361aeb-0dce-45d6-80fb-76ff443dbfc8)
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
## 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": "
",
"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": "
Click me"
}
```
### check_orientation_lock
Check if content forces a specific orientation.
**Parameters:**
- `html` (required): HTML content to test for orientation lock issues
Example
```
{
"html": "Content"
}
```
## 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": "
Low contrast text",
"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