a11y

mcp-a11y-tools

通过 Model Context Protocol（MCP）为 AI Agent 提供 Web 无障碍分析工具。

工具

check_alt_text

分析 HTML 中的图像，检查是否缺少替代文本、替代文本为空或质量较低。

• 检测缺少 alt 属性的图像
• 识别装饰性图像（alt="" 且带有 role="presentation"）
• 标记质量较低的替代文本（例如“图像”“照片”或文件名）
• 检查链接图像、<input type="image"> 和 <area> 元素

check_heading_hierarchy

验证标题结构，确保嵌套正确且内容质量良好。

• 验证 h1-h6 的顺序，确保没有跳级
• 确保每个页面只有一个 <h1>
• 检测内容为空、过短或过长的标题
• 支持带有 aria-level 的 role="heading"
• 返回标题大纲的可视化树结构

check_color_contrast

检查前景色与背景色的组合是否符合 WCAG 2.x 对比度要求。

• 根据 WCAG 相对亮度公式精确计算对比度
• 报告普通文本和大号文本是否符合 AA 和 AAA 标准
• 接受十六进制（#fff、#ffffff）、rgb(r,g,b) 和具名颜色

validate_aria

验证 HTML 元素上的 ARIA 属性。

• 检测无效的 ARIA 角色
• 检查角色是否缺少必需的 ARIA 属性
• 标记与原生语义重复的 ARIA 角色
• 警告非交互元素上的 aria-label
• 检测可聚焦元素上的 aria-hidden="true"

check_form_accessibility

审核表单元素是否符合无障碍要求。

• 验证每个输入项是否具有关联标签（显式、隐式或 ARIA）
• 检查单选按钮／复选框组是否使用 <fieldset> 和 <legend>
• 标记仅将占位文本用作标签的情况
• 为个人信息字段建议使用 autocomplete 属性
• 检测会导致标签关联失效的重复 ID

设置

npm install
npm run build

在 Claude Desktop 中使用

将以下内容添加到 claude_desktop_config.json：

{
  "mcpServers": {
    "a11y-tools": {
      "command": "node",
      "args": ["D:/products/mcp-servers/mcp-a11y-tools/dist/index.js"]
    }
  }
}

许可证

MIT