MCP WCAG辅助工具🦾
一个强大的模型上下文协议（MCP）服务器，用于全面的WCAG可访问性分析和代码修复。
🌟 特性
- 10个专业工具 用于可访问性分析
- WCAG 2.0、2.1、2.2 支持
- 多框架 支持（HTML、React、Vue、Angular）
- 实时URL审核 能力
- ESLint配置 发电机
- 自动代码重构
- GitHub WCAG存储库 整合
- 10种语言 支持
🛠️ 可用工具
- 分析可访问性 -分析WCAG违规代码
- 重构器for_wcag -自动修复可访问性问题
- validate_compliance -检查WCAG合规级别（A、AA、AAA）
- get_文档 -获取WCAG文档以了解特定规则
- 注释代码 -添加带有可访问性问题的内联注释
- 可访问性_核心 -计算详细的可访问性得分（0-100）
- 发电机组件 -生成可访问的组件模板
- eslint_config -使用11条规则生成ESLint配置
- live_url_audit -审核实时网站的可访问性
- 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-wcag2.安装依赖项
npm install3.建设项目
npm run build4.验证安装
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 devLint代码
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（英语、西班牙语、法语、德语、西班牙语、意大利语、荷兰语、日语、波兰语、日语、韩语、日语）
🤝 贡献
- 分叉存储库
- 创建功能分支(
git checkout -b feature/AmazingFeature) - 提交您的更改(
git commit -m 'Add some AmazingFeature') - 推到分支(
git push origin feature/AmazingFeature) - 打开拉取请求
📝 许可证
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个核心工具
______________________________________________________________________
由以下材料制成❤️ 网络可访问性