AI导哈

无障碍检查工具

一款基于Playwright和axe-core的自动化WCAG无障碍审计工具，帮助AI编码代理和助手发现、诊断并指导修复网站无障碍问题。

  • by bennyzen
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 bennyzen/mcp-accessibility-checker

使用说明

MCP可访问性检查器

一个模型上下文协议（MCP）服务器，用于使用Playwright和axe-core对网站进行自动WCAG可访问性审计。专为AI编码代理和助手设计，用于发现、诊断和指导可访问性问题的修复。

AI代理用例

  • 可访问性审计：对任何URL运行完整的WCAG 2.1 AA审核
  • 有针对性的检查：检查特定类别（对比度、ARIA、表格、图像等）
  • 元件级检查：通过CSS选择器深入单个组件
  • 报告生成：创建带有执行摘要的降价报告并修复指导
  • 配对 mcp颜色转换：使用对比审计结果和颜色工具进行完整的可访问性修复

安装和配置

MCP客户端配置

添加到您的MCP客户端配置（Claude Desktop、Gemini CLI等）：

{
  "mcpServers": {
    "accessibility-checker": {
      "command": "npx",
      "args": ["-y", "mcp-accessibility-checker@latest"]
    }
  }
}

本地开发

git clone https://github.com/bennyzen/mcp-accessibility-checker.git
cd mcp-accessibility-checker
npm install
npx playwright install chromium
npm run dev

可用工具（10）

全面审计

工具 说明
audit 对URL运行所有WCAG规则。返回违规、通过和未完成的检查。

分类工具

工具 说明
audit_aria ARIA角色、属性、状态和名称/角色/值合规性
audit_contrast 颜色对比度和视觉提示（WCAG AA/AAA）
audit_forms 表单标签、字段集、错误识别
audit_images 图像替代文本、角色和文本替代方案
audit_structure 标题层次结构、地标、文档结构、语义
audit_navigation 键盘可访问性、标签顺序、跳过链接、焦点管理
audit_tables 表标题、范围、标题、数据表结构

元素级别

工具 说明
check_element 运行特定CSS选择器范围内的检查

报告

工具 说明
report 根据审计结果生成降价报告

示例用法

全面审计

{
  "name": "audit",
  "arguments": { "url": "https://example.com" }
}

返回包含所有违规的结构化JSON，包括元素选择器、HTML代码段、严重性和修复指南。

类别审核

{
  "name": "audit_contrast",
  "arguments": { "url": "https://example.com" }
}

元素检查

{
  "name": "check_element",
  "arguments": {
    "url": "https://example.com",
    "selector": "#login-form"
  }
}

生成报告

{
  "name": "report",
  "arguments": {
    "audit_json": "<JSON output from any audit tool>"
  }
}

生成降价报告：

# Accessibility Audit Report

**URL:** https://example.com
**Date:** 2026-03-19T14:18:54.037Z
**Standard:** WCAG 2.1 Level AA

## Summary

| Severity | Count |
|----------|-------|
| Critical | 0     |
| Serious  | 0     |
| Moderate | 2     |

| Category   | Violations |
|------------|-----------|
| Structure  | 1         |
| Navigation | 1         |

## Moderate Issues

### landmark-one-main (1 element)
Ensure the document has a main landmark
[Rule documentation](...)

- `html`
  **Fix:** Document does not have a main landmark

## Passed Checks (13)
aria-hidden-body, bypass, color-contrast, ...

审核结果形状

所有审计工具都返回相同的JSON结构：

{
  url: string,
  timestamp: string,
  toolVersion: string,
  axeVersion: string,
  summary: {
    violations: number,
    passes: number,
    incomplete: number,
    bySeverity: { critical, serious, moderate, minor }
  },
  violations: [{
    id: string,          // axe rule ID
    severity: string,    // "critical" | "serious" | "moderate" | "minor"
    description: string,
    helpUrl: string,     // Deque rule documentation
    category: string,    // "aria" | "contrast" | "forms" | etc.
    nodes: [{
      selector: string,  // CSS selector path
      html: string,      // HTML snippet
      failureSummary: string
    }]
  }],
  passes: [{ id, description, nodes: number }],
  incomplete: [{ id, description, nodes: [{ selector, html }] }]
}

工作流程：完全无障碍修复

  1. 跑 audit 了解全貌
  2. 使用分类工具(audit_contrast, audit_forms等）钻入特定区域
  3. 使用 check_element 检查单个组件
  4. 使用 report 为利益相关者生成降价摘要
  5. 使用 mcp颜色转换 compare 和 contrast 寻找兼容颜色替代品的工具

故障排除

未找到铬

npx playwright install chromium

慢速页面超时

默认导航超时为30秒。对于速度较慢的页面，可以考虑在页面可能被缓存后进行审核。

未发现违规行为

干净的审计并不意味着该网站是完全可访问的。斧头核心会自动捕获约57%的WCAG问题。仍然需要手动测试（键盘导航、屏幕阅读器）。

许可证

麻省理工学院

相关 MCP