Skip to main content
Glama

Web 可访问性测试 MCP 服务器 (A11y MCP)

铁匠徽章

a11ymcpwide

A11y MCP 是一个 MCP(模型上下文协议)服务器,它允许 LLM 访问 Web 可访问性测试 API。

该服务器使用 Deque Axe-core API 和 Puppeteer 允许 LLM 分析 Web 内容是否符合 WCAG 并识别可访问性问题。

注意:这不是 Deque Labs 的官方 MCP 服务器。

如果您喜欢这个项目,请留下一颗星!🌟

特征

  • 测试网页:测试任何公共 URL 是否存在可访问性问题

  • 测试 HTML 片段:测试原始 HTML 字符串是否存在可访问性问题

  • WCAG 合规性测试:根据各种 WCAG 标准(2.0、2.1、2.2)检查内容

  • 可定制测试:指定要测试的可访问性标签/标准

  • 规则探索:获取有关可用可访问性规则的信息

  • 颜色对比度分析:检查颜色组合是否符合 WCAG 标准

  • ARIA 验证:测试 ARIA 属性的正确使用

  • 方向锁定检测:识别强制特定屏幕方向的内容

Related MCP server: Web Accessibility MCP Server

安装

要将此服务器与 Claude Desktop 一起使用,您需要在 MCP 设置中对其进行配置:

**对于 macOS:**编辑'~/Library/Application Support/Claude/claude_desktop_config.json'文件

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

**对于 Windows:**编辑%APPDATA%\Claude\settings\claude_mcp_settings.json文件

**对于 Linux:**编辑~/.config/Claude/settings/claude_mcp_settings.json文件,将/path/to/axe-mcp-server/build/index.js替换为已编译服务器文件的实际路径。

可用工具

测试可访问性

测试 URL 是否存在可访问性问题。

参数:

  • url (必填):要测试的网页的 URL

  • tags (可选):要测试的 WCAG 标签数组(例如,[“wcag2aa”])

例子

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

测试html字符串

测试 HTML 字符串是否存在可访问性问题。参数:

  • html(必需):要测试的 HTML 内容

  • 标签(可选):要测试的 WCAG 标签数组(例如,[“wcag2aa”])

例子

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

获取规则

通过可选过滤获取有关可用可访问性规则的信息。

检查颜色对比度

检查前景色和背景色组合是否满足 WCAG 对比度要求。

参数:

  • foreground (必需):十六进制格式的前景色(例如“#000000”)

  • background (必需):十六进制格式的背景颜色(例如“#FFFFFF”)

  • fontSize (可选):字体大小(以像素为单位)(默认值:16)

  • isBold (可选):文本是否为粗体(默认值:false)

例子

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

检查颜色对比度

检查 ARIA 属性在 HTML 中是否正确使用。

参数:

  • html (必需):用于测试 ARIA 属性使用情况的 HTML 内容

例子

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

检查方向锁

检查内容是否强制特定方向。

参数:

  • html (必需):用于测试方向锁定问题的 HTML 内容

例子

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

响应格式

服务器以结构化的JSON格式返回可访问性测试结果:

{ "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" } }

依赖项

  • @modelcontextprotocol/sdk

  • 木偶师

  • @axe-core/puppeteer

  • 斧头核心

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/ronantakizawa/a11ymcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server