MCP Wcag Accessibility

MCP WCAG辅助工具🦾

一个强大的模型上下文协议（MCP）服务器，用于全面的WCAG可访问性分析和代码修复。

🌟 特性

• 10个专业工具 用于可访问性分析
• WCAG 2.0、2.1、2.2 支持
• 多框架 支持（HTML、React、Vue、Angular）
• 实时URL审核 能力
• ESLint配置 发电机
• 自动代码重构
• GitHub WCAG存储库 整合
• 10种语言 支持

🛠️ 可用工具

1. 分析可访问性 -分析WCAG违规代码
2. 重构器for_wcag -自动修复可访问性问题
3. validate_compliance -检查WCAG合规级别（A、AA、AAA）
4. get_文档 -获取WCAG文档以了解特定规则
5. 注释代码 -添加带有可访问性问题的内联注释
6. 可访问性_核心 -计算详细的可访问性得分（0-100）
7. 发电机组件 -生成可访问的组件模板
8. eslint_config -使用11条规则生成ESLint配置
9. live_url_audit -审核实时网站的可访问性
10. wcag_github_sync -与WCAG GitHub官方仓库同步

📋 先决条件

• Node.js 18+（用v22.14.0测试）
• npm或纱线
• 克劳德桌面应用程序

🔧 安装

1.克隆存储库

git clone https://github.com/YOUR_USERNAME/mcp-wcag.git
cd mcp-wcag

2.安装依赖项

npm install

3.建设项目

npm run build

4.验证安装

npm run verify

⚙️ Claude桌面配置

视窗

增添 %APPDATA%\Claude\claude_desktop_config.json:

{
  "mcpServers": {
    "wcag-accessibility": {
      "command": "node",
      "args": ["C:\\path\\to\\mcp-wcag\\dist\\index.js"]
    }
  }
}

Mac/Linux

增添 ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "wcag-accessibility": {
      "command": "node",
      "args": ["/path/to/mcp-wcag/dist/index.js"]
    }
  }
}

🧪 测试

运行测试套件：

npm test

测试单个工具：

node test-tools.mjs

📖 使用示例

分析HTML的可访问性

Analyze this HTML for WCAG AA compliance:

  
  

生成ESLint配置

Generate an ESLint configuration for React with TypeScript and accessibility rules

审核实时网站

Analyze https://example.com for accessibility issues

生成可访问的组件

Generate an accessible modal component in React

🏗️ 项目结构

mcp-wcag/
├── src/
│   ├── index.ts           # Main server entry point
│   ├── core/
│   │   ├── WCAGAnalyzer.ts
│   │   ├── CodeParser.ts
│   │   └── AccessibilityFixer.ts
│   ├── rules/
│   │   └── wcagRules.ts
│   └── tools/
│       ├── analyzeAccessibility.ts
│       ├── refactorForWCAG.ts
│       ├── validateCompliance.ts
│       └── ... (7 more tools)
├── dist/                  # Compiled JavaScript
├── wcag-data/            # Local WCAG data cache
├── package.json
├── tsconfig.json
└── README.md

🔄 发展

观看模式

npm run dev

Lint代码

npm run lint

格式代码

npm run format

🐛 故障排除

常见问题

问题: require is not defined

• 解决方案：项目使用ES模块。所有进口必须使用 import 语法。

问题：服务器在启动时崩溃

• 解决方案：运行 npm run verify 检查安装情况

问题：Claude中未显示工具

• 解决方案：配置后重新启动Claude Desktop

📊 WCAG保险范围

• 自动检测：约为WCAG标准的30-40%
• 成功标准：总计225（2.0、2.1、2.2）
• 技巧：850多份文件
• 代码示例: 500+
• 语言：10（英语、西班牙语、法语、德语、西班牙语、意大利语、荷兰语、日语、波兰语、日语、韩语、日语）

🤝 贡献

1. 分叉存储库
2. 创建功能分支(git checkout -b feature/AmazingFeature)
3. 提交您的更改(git commit -m 'Add some AmazingFeature')
4. 推到分支(git push origin feature/AmazingFeature)
5. 打开拉取请求

📝 许可证

MIT许可证-请参阅 许可证 详细信息文件

🙏 致谢

• W3C WAI用于WCAG规范
• Deque Systems为斧头核心提供灵感
• Claude/Anthropic for MCP框架
• WCAG社区指南

📧 联系

• github： @您的用户名
• 项目链接：

🚀 版本历史记录

• v3.0.1 -ES模块的错误修复和错误处理
• v3.0.0 -添加GitHub WCAG同步
• v2.1.0 -添加ESLint配置和实时URL审核
• v2.0.0版本 -增加了评分、注释和组件生成
• v1.0.0 -初始版本包含4个核心工具

______________________________________________________________________

由以下材料制成❤️ 网络可访问性