A11y专家MCP
](https://pypi.org/project/a11y-expert-mcp/) 
您的AI编码助手的辅助功能专家。这 MCP(模型上下文协议) 服务器为Claude、Cursor和Windsurf等AI工具提供了对WAI-ARIA模式、代码审查、对比度检查和WCAG指导的实时访问,因此他们编写的代码从一开始就可以访问。
里面有什么
🔧 工具
| 工具 | 它做什么 |
|---|---|
get_pattern | 获取任何UI组件的完整WAI-ARIA实现模式——角色、状态、键盘交互和代码示例。 |
review_code | 粘贴HTML/JSX/TSX/Vue/Svelte代码,并获取包含特定修复和WCAG参考的可访问性问题列表。检测10多种反模式,包括缺少标签、单击div、标题层次结构损坏、缺少对话框角色等。 |
list_patterns | 查看知识库中可用的所有33个组件模式。 |
check_contrast | 对照WCAG AA和AAA对比度要求,检查正常和大文本的任意两种十六进制颜色。 |
📚 知识库(33个组成部分)
每种模式都来自 WAI-ARIA创作实践 包括角色、状态、属性、键盘交互和代码示例。
标准来源: 此服务器中的33个模式指令文件是从同步的 a11y-skills社区维护着真相的来源。如果你想贡献一个新模式或改进现有模式,请在那里打开PR。| 手风琴 | 警报 | 警报对话框 | 面包屑 |
| 按钮 | 旋转木马 | 复选框 | 组合框 |
| 对话框(模态) | 披露 | 馈送 | 网格 |
| 标题 | 图像标签 | 地标 | 链接 |
| 列表框 | 菜单 | 菜单按钮 | 仪表 |
| 收音机 | 滑块 | 滑块(多拇指) | 旋转按钮 |
| 切换 | 表 | 选项卡 | 工具栏 |
| 工具提示 | 树视图 | 树网格 | 窗口拆分器 |
| 可访问性(通用) |
💬 鼓励
您的AI助手可以使用的预构建工作流程:
| 提示 | 它做什么 |
|---|---|
audit-component | 逐步的可访问性审计——检查ARIA、键盘、焦点、对比度、标题、触摸目标。提供代码+可选组件类型。 |
make-accessible | 将不可访问的代码重写为完全可访问的实现,并使用WAI-ARIA模式和注释解释每次更改。 |
check-form-accessibility | 表单特定审计——标签、必填字段、错误处理、字段集、自动完成、标签顺序和提交反馈。 |
wcag-checklist | 生成WCAG 2.2合规性检查表(AA或AAA),按原则组织,针对您的页面或组件量身定制。 |
aria-guide | 组件的完整ARIA实现指南——角色、属性、键盘表、焦点管理、屏幕阅读器脚本和代码示例。 |
📖 资源
面向MCP客户的可浏览知识库:
a11y://patterns--所有33种成分模式的索引a11y://patterns/{component}--任何组件的完整图案细节
安装
先决条件
- Python 3.11+
- 紫外线 (推荐)或pip
选项1:直接使用uvx运行(无需安装)
uvx a11y-expert-mcp选项2:使用pip安装
pip install a11y-expert-mcp然后运行:
a11y-expert-mcp选项3:从源代码运行
git clone https://github.com/Elizabeth1979/a11y-expert-mcp.git
cd a11y-expert-mcp
uv run a11y-expert-mcp配置
克劳德桌面/克劳德代码
添加到MCP配置(~/.claude/config.json 或克劳德桌面设置):
{
"mcpServers": {
"a11y": {
"command": "uvx",
"args": ["a11y-expert-mcp"]
}
}
}或者,如果从源代码运行:
{
"mcpServers": {
"a11y": {
"command": "uv",
"args": [
"run",
"--project",
"/path/to/a11y-expert-mcp",
"a11y-expert-mcp"
]
}
}
}Cursor/Windsurf/其他MCP客户端
使用相同 command 和 args --查看编辑器的MCP配置文档,了解配置文件的确切位置。
使用示例
连接后,您的AI助手可以:
获取一个可访问的模式:
“如何构建可访问的选项卡组件?” → 助理打来电话 get_pattern("tabs") 并通过键盘交互和代码获得完整的WAI-ARIA模式。检查代码是否存在问题:
“检查此模式是否存在可访问性问题” → 助理打来电话 review_code(code, component_type="modal") 并得到修复的具体问题。检查颜色对比度:
“#fff上的#666通过WCAG吗?” → 助理打来电话 check_contrast("#666", "#fff") 并获得正常和大文本的AA/AAA结果。生成WCAG检查表:
“给我结账页面的WCAG AA清单” → 助理使用 wcag-checklist 提示生成量身定制的合规检查表。运作原理
服务器将33个WAI-ARIA模式文档打包成一个知识库。当你的AI助手询问一个组件时,它会得到真正的规范,而不是幻觉中的ARIA属性。这 review_code 该工具对常见的反模式(div上的点击处理程序、缺失的标签、损坏的标题层次结构、正tabindex等)进行10多次静态检查,并交叉引用相关模式。
没有外部API调用。没有数据库。一切都在本地运行。
技术栈
- MCP-SDK (快速MCP)
- Python 3.11+
- WAI-ARIA创作实践知识库(捆绑的markdown文件)
相关工具
更广泛的可访问性工程工具包的一部分。搭配:
screen-reader-cli--用于屏幕阅读器驱动测试的CLI。哪里a11y-expert-mcp为您的AI助手提供静态指导(模式、代码审查),screen-reader-cli使用Virtual screen reader+Playwright对真实页面进行实时屏幕阅读器检查。静态+运行时=全覆盖。a11y-skills--此服务器提供的模式指令文件的规范源代码。a11y-engineering-toolkit--伞形仓库,带有浏览器端审计面板+用户体验小部件,以及完整的投资组合图。
许可证
麻省理工学院
作者
艾莉(@伊丽莎白1979)
