aria MCP

aria mcp

一个模型上下文协议（MCP）服务器，提供对W3C WAI-ARIA规范的全面访问。专为可访问性专业人员、开发人员和AI代理设计，用于查询ARIA角色、状态、属性和可访问性要求。

快速开始

添加到MCP客户端配置中：

{
  "mcpServers": {
    "aria": {
      "command": "npx",
      "args": ["-y", "aria-mcp"]
    }
  }
}

就是这样！无需克隆，无需构建——只需添加配置并开始查询ARIA。

特性

• 完整的ARIA 1.3规范数据：角色、状态、属性及其关系
• 角色验证：检查特定角色的属性有效性
• 无障碍指南：名称要求、地标、活动区域
• 聪明的建议：根据UI组件描述获取角色推荐
• 本地和远程工作：stdio传输用于本地使用，Netlify功能用于远程部署

可用工具

安装

npm install

配置Claude桌面

将此添加到您的Claude Desktop MCP设置中(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "aria-mcp": {
      "command": "node",
      "args": ["/path/to/aria-mcp/src/index.js"]
    }
  }
}

配置光标

添加到光标MCP设置中：

{
  "mcpServers": {
    "aria-mcp": {
      "command": "node",
      "args": ["/path/to/aria-mcp/src/index.js"]
    }
  }
}

使用示例

查询角色

get-role button

返回有关按钮角色的完整信息，包括：

• 说明和目的
• 类别（小部件、地标等）
• 必需/支持/禁止的属性
• 名称要求
• 父母/子女角色要求

验证属性

validate-role-attributes role=button attributes=["aria-pressed","aria-expanded","aria-label"]

检查角色的每个属性是否有效、必需或禁止。

获取角色建议

suggest-role "dropdown menu with autocomplete"

返回建议的角色（组合框、列表框）和使用指南。

列出地标

list-landmarks

列出所有具有页面结构最佳实践的ARIA地标角色。

数据源

此MCP服务器使用直接从 W3C ARIA存储库，它作为Git子模块包含在内。

更新数据

要更新到最新的ARIA规范：

npm run update-submodule

这将：

1. 从W3C ARIA存储库中提取最新更改
2. 重新解析规范以重新生成 data/aria-data.json

手动解析

要在不更新子模块的情况下重新生成数据：

npm run parse

项目结构

aria-mcp/
├── src/
│   ├── index.js          # MCP server with stdio transport
│   └── tools.js          # Tool definitions and handlers
├── scripts/
│   └── parse-aria-spec.js # Parser for W3C ARIA HTML specs
├── data/
│   ├── aria/             # W3C ARIA repo (Git submodule)
│   └── aria-data.json    # Parsed specification data
├── netlify/
│   └── functions/
│       └── api.js        # Netlify Function for remote use
└── netlify.toml          # Netlify configuration

部署到Netlify

此项目已配置为Netlify部署。

通过GitHub部署

1. 将此存储库推送到GitHub
2. 通过仪表板连接到Netlify
3. Netlify将自动构建和部署

使用远程服务器

部署后，配置MCP客户端：

{
  "mcpServers": {
    "aria-mcp": {
      "command": "npx",
      "args": ["mcp-remote@next", "https://your-site.netlify.app/mcp"]
    }
  }
}

用例

面向无障碍专业人士

• 快速参考：在不离开IDE的情况下查找角色要求
• 验证：在代码审查中验证ARIA的使用情况
• 训练：帮助团队成员理解ARIA语义

对于开发者

• 实时引导：在构建组件时获取角色建议
• 属性验证：及早发现无效的ARIA使用
• 文档：无需切换浏览器上下文即可访问规范详细信息

对于AI代理

• 代码生成：生成具有正确ARIA的可访问组件
• 代码审查：验证拉取请求中ARIA的使用情况
• 可访问性审计：检查是否缺少或不正确的属性

ARIA规范覆盖范围

• 100个角色：WAI-ARIA 1.3中的所有角色
• 10个国家：随用户交互而变化的动态值
• 43房地产：静态或很少变化的特性
• 角色类别：小部件、复合、文档、地标、liveRegion、窗口、摘要

贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 跑 npm run parse 如果修改解析器
5. 提交拉取请求

许可证

麻省理工学院

资源

• WAI-ARIA规范
• ARIA创作实践
• 模型上下文协议