A11y MCP Server (Shawnmcb)

11y mcp服务器

MCP服务器，用于可访问性审计、WCAG标准查找和补救指导。已经过时了。

特性

• a11y_lookup_wcag：按编号、关键字或级别查找WCAG 2.2标准
• a11y_check_pattern：分析HTML代码片段以了解常见的可访问性问题
• a11y_suggest_fix：使用前后代码示例获取补救模式
• a11y_document_组件：为18+种UI组件类型生成可访问性文档
• a11y_audit_总结：从问题列表生成专业审计报告

本地开发

# Install dependencies
npm install

# Build
npm run build

# Run locally
npm start

# Server runs on http://localhost:8080
# Health check: http://localhost:8080/health
# MCP endpoint: http://localhost:8080/mcp

NFSN部署

我走自己道路的先决条件；YMMV：

1. 有资金的NFSN账户（约10美元初始存款）
2. 已配置SSH访问

设置步骤

1.创建NFSN站点

1. 登录NFSN成员界面
2. 站点→ 创建新网站
3. 站点类型： 自定义 （Node.js守护进程需要）
4. 注意您的网站主机名（例如。， yoursite.nfshost.com)

2.上传代码

# From project directory
rsync -avz --exclude node_modules --exclude .git --exclude dist \
  ./ USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net:/home/protected/a11y-mcp-server

3.SSH设置

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net

# Navigate to project
cd /home/protected/a11y-mcp-server

# Check Node.js version (should be 18+)
node --version

# Install dependencies
npm install --production

# Build
npm run build

# Make run.sh executable
chmod +x run.sh

# Test locally
./run.sh
# Ctrl+C to stop

4.配置NFSN守护进程

1. 转到NFSN现场控制面板
2. 站点→ 你的网站→ 站点信息→ 守护进程
3. 添加守护进程：

- 标签: node - 命令行: /home/protected/a11y-mcp-server/run.sh - 工作目录: /home/protected/a11y-mcp-server

5.配置NFSN代理

1. 站点→ 你的网站→ 站点信息→ 代理
2. 添加代理：

- 协议: http - 基准URI: /mcp - 文档根目录：（留空） - 目标端口: 8080

6.验证部署

# Check health endpoint
curl https://yoursite.nfshost.com/health

# Test MCP endpoint
curl -X POST https://yoursite.nfshost.com/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json, text/event-stream" \
  -d '{"jsonrpc":"2.0","method":"tools/list","id":1}'

故障排除

检查守护进程日志：

ssh USERNAME_SITENAME@ssh.phx.nearlyfreespeech.net
cat /home/protected/a11y-mcp-server/daemon.log

重新启动守护进程： 通过NFSN控制面板：站点→ 守护进程→ 重启

检查守护进程是否正在运行：

ps aux | grep node

Claude代码配置

添加 ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "a11y": {
      "url": "https://yoursite.nfshost.com/mcp"
    }
  }
}

然后重新启动Claude Code。

使用Claude代码进行本地测试

对于NFSN部署前的测试，请在本地运行服务器并配置Claude Code进行连接：

1. 启动服务器：

npm start

1. 添加 ~/.config/claude/claude_desktop_config.json:

{
  "mcpServers": {
    "a11y-local": {
      "url": "http://localhost:8080/mcp"
    }
  }
}

1. 重新启动Claude代码

评估问题

使用以下问题验证服务器是否正常工作：

1. WCAG查询：“WCAG标准涵盖了键盘导航，它是什么级别的？”

- 预期：返回2.1.1键盘（A级）的完整详细信息

1. 补救模式：“装饰图像上缺失alt文本的修复模式是什么？”

- 预期：返回alt=“”为空的模式示例

1. 组件文档：“为模态对话框组件生成可访问性文档。”

- 预期：返回键盘交互、ARIA属性、屏幕阅读器期望值

1. WCAG 2.2搜索：“WCAG 2.2的哪些标准是针对移动/触摸交互的？”

- 预期：返回2.5.x输入模式标准

1. 常见故障：“标准1.4.3对比度的常见故障是什么？”

- 预期：返回F24、F83故障技术

用法示例

查阅WCAG标准

Query: "What WCAG criterion covers keyboard navigation?"
Tool: a11y_lookup_wcag
Args: { "query": "keyboard" }

检查HTML是否存在问题

Query: "Check this HTML for accessibility issues"
Tool: a11y_check_pattern
Args: { "html": "..." }

获取补救模式

Query: "How do I fix missing alt text on decorative images?"
Tool: a11y_suggest_fix
Args: { "issueType": "missing-alt-decorative" }

生成组件文档

Query: "Generate accessibility documentation for a modal dialog"
Tool: a11y_document_component
Args: { "componentType": "modal" }

更新WCAG数据

WCAG标准捆绑在 src/data/wcag-criteria.json。要更新：

1. 使用新条件编辑JSON文件
2. 重建： npm run build
3. 重新部署到NFSN

许可证

麻省理工学院