A11y Expert
БесплатноНе проверенAn accessibility expert MCP server that provides AI coding assistants with real-time access to WAI-ARIA patterns, code review, contrast checking, and WCAG guida
Описание
An accessibility expert MCP server that provides AI coding assistants with real-time access to WAI-ARIA patterns, code review, contrast checking, and WCAG guidance for writing accessible code from the start.
README
An accessibility expert for your AI coding assistant. This MCP (Model Context Protocol) server gives AI tools like Claude, Cursor, and Windsurf real-time access to WAI-ARIA patterns, code review, contrast checking, and WCAG guidance — so the code they write is accessible from the start.
What's Inside
🔧 Tools
| Tool | What it does |
|---|---|
get_pattern |
Get the full WAI-ARIA implementation pattern for any UI component — roles, states, keyboard interaction, and code examples. |
review_code |
Paste HTML/JSX/TSX/Vue/Svelte code and get a list of accessibility issues with specific fixes and WCAG references. Detects 10+ anti-patterns including missing labels, click-on-divs, broken heading hierarchy, missing dialog roles, and more. |
list_patterns |
See all 33 component patterns available in the knowledge base. |
check_contrast |
Check any two hex colors against WCAG AA and AAA contrast requirements for both normal and large text. |
📚 Knowledge Base (33 Components)
Every pattern comes from the WAI-ARIA Authoring Practices and includes roles, states, properties, keyboard interaction, and code examples.
Canonical source: The 33 pattern instruction files in this server are synced from a11y-skills, the community-maintained source of truth. If you want to contribute a new pattern or improve an existing one, open the PR there.
| Accordion | Alert | Alert Dialog | Breadcrumbs |
| Buttons | Carousel | Checkbox | Combobox |
| Dialog (Modal) | Disclosure | Feed | Grid |
| Headings | Image Labeling | Landmarks | Link |
| Listbox | Menu | Menu Button | Meter |
| Radio | Slider | Slider (Multi-thumb) | Spinbutton |
| Switch | Tables | Tabs | Toolbar |
| Tooltip | Treeview | Treegrid | Window Splitter |
| Accessibility (General) |
💬 Prompts
Pre-built workflows your AI assistant can use:
| Prompt | What it does |
|---|---|
audit-component |
Step-by-step accessibility audit — checks ARIA, keyboard, focus, contrast, headings, touch targets. Provide code + optional component type. |
make-accessible |
Rewrites inaccessible code into a fully accessible implementation with WAI-ARIA patterns and comments explaining every change. |
check-form-accessibility |
Form-specific audit — labels, required fields, error handling, fieldsets, autocomplete, tab order, and submit feedback. |
wcag-checklist |
Generates a WCAG 2.2 compliance checklist (AA or AAA) organized by principle, tailored to your page or component. |
aria-guide |
Complete ARIA implementation guide for a component — roles, attributes, keyboard table, focus management, screen reader script, and code example. |
📖 Resources
Browsable knowledge base for MCP clients:
a11y://patterns— Index of all 33 component patternsa11y://patterns/{component}— Full pattern detail for any component
Installation
Prerequisites
- Python 3.11+
- uv (recommended) or pip
Option 1: Run directly with uvx (no install needed)
uvx a11y-expert-mcp
Option 2: Install with pip
pip install a11y-expert-mcp
Then run:
a11y-expert-mcp
Option 3: Run from source
git clone https://github.com/Elizabeth1979/a11y-expert-mcp.git
cd a11y-expert-mcp
uv run a11y-expert-mcp
Configuration
Claude Desktop / Claude Code
Add to your MCP config (~/.claude/config.json or Claude Desktop settings):
{
"mcpServers": {
"a11y": {
"command": "uvx",
"args": ["a11y-expert-mcp"]
}
}
}
Or if running from source:
{
"mcpServers": {
"a11y": {
"command": "uv",
"args": [
"run",
"--project",
"/path/to/a11y-expert-mcp",
"a11y-expert-mcp"
]
}
}
}
Cursor / Windsurf / Other MCP Clients
Use the same command and args — check your editor's MCP configuration docs for the exact config file location.
Usage Examples
Once connected, your AI assistant can:
Get an accessible pattern:
"How do I build an accessible tabs component?" → The assistant calls
get_pattern("tabs")and gets the full WAI-ARIA pattern with keyboard interaction and code.
Review code for issues:
"Check this modal for accessibility problems" → The assistant calls
review_code(code, component_type="modal")and gets specific issues with fixes.
Check color contrast:
"Does #666 on #fff pass WCAG?" → The assistant calls
check_contrast("#666", "#fff")and gets AA/AAA results for normal and large text.
Generate a WCAG checklist:
"Give me a WCAG AA checklist for my checkout page" → The assistant uses the
wcag-checklistprompt to generate a tailored compliance checklist.
How It Works
The server bundles 33 WAI-ARIA pattern documents as a knowledge base. When your AI assistant asks about a component, it gets the real specification — not hallucinated ARIA attributes. The review_code tool runs 10+ static checks for common anti-patterns (click handlers on divs, missing labels, broken heading hierarchy, positive tabindex, etc.) and cross-references relevant patterns.
No external API calls. No database. Everything runs locally.
Tech Stack
- MCP SDK (FastMCP)
- Python 3.11+
- WAI-ARIA Authoring Practices knowledge base (bundled markdown files)
Related tools
Part of a broader accessibility engineering toolkit. Pair this with:
- screen-reader-cli — CLI for screen-reader-driven testing. Where
a11y-expert-mcpgives your AI assistant static guidance (patterns, code review),screen-reader-cliruns live screen-reader checks against real pages using Virtual Screen Reader + Playwright. Static + runtime = full coverage. - a11y-skills — Canonical source for the pattern instruction files this server serves.
- a11y-engineering-toolkit — Umbrella repo with browser-side audit panel + UX widget, plus the full portfolio map.
License
MIT
Author
Elli (@Elizabeth1979)
Установить A11y Expert в Claude Desktop, Claude Code, Cursor
unyly install a11y-expert-mcpСтавит в Claude Desktop, Claude Code, Cursor и VS Code — сам разбирается с npx, uvx и сборкой из исходников.
Впервые? Поставь CLI: curl -fsSL https://unyly.org/install | sh
Или настроить вручную
Выполни в терминале:
claude mcp add a11y-expert-mcp -- uvx a11y-expert-mcpFAQ
A11y Expert MCP бесплатный?
Да, A11y Expert MCP бесплатный — установка в пару кликов через Unyly без оплаты.
Нужен ли API-ключ для A11y Expert?
Нет, A11y Expert работает без API-ключей и переменных окружения.
A11y Expert — hosted или self-hosted?
Self-hosted: сервер запускается локально на твоей машине командой из раздела установки.
Как установить A11y Expert в Claude Desktop, Claude Code или Cursor?
Открой A11y Expert на unyly.org, выбери вкладку своего клиента (Claude Desktop, Claude Code, Cursor) и нажми Install — конфиг сгенерируется автоматически, без правки JSON.
Похожие MCP
GitHub
PRs, issues, code search, CI status
автор: GitHubFilesystem
Secure file operations with configurable access controls.
Memory
Knowledge graph-based persistent memory system.
Template MCP Server
A CLI tool to create a new Model Context Protocol server project with TypeScript support, dual transport options, and an extensible structure
автор: mcpdotdirectCompare A11y Expert with
Не уверен что выбрать?
Найди свой стек за 60 секунд
Автор?
Embed-бейдж для README
Похожее
Все в категории development
