A11y Expert MCP
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@A11y Expert MCPReview this HTML snippet for accessibility issues"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
A11y Expert MCP
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 the full WAI-ARIA implementation pattern for any UI component ā roles, states, keyboard interaction, and code examples. |
| 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. |
| See all 33 component patterns available in the knowledge base. |
| 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 |
| Step-by-step accessibility audit ā checks ARIA, keyboard, focus, contrast, headings, touch targets. Provide code + optional component type. |
| Rewrites inaccessible code into a fully accessible implementation with WAI-ARIA patterns and comments explaining every change. |
| Form-specific audit ā labels, required fields, error handling, fieldsets, autocomplete, tab order, and submit feedback. |
| Generates a WCAG 2.2 compliance checklist (AA or AAA) organized by principle, tailored to your page or component. |
| 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
Related MCP server: a11y-mcp-server
Installation
Prerequisites
Python 3.11+
uv (recommended) or pip
Option 1: Run directly with uvx (no install needed)
uvx a11y-expert-mcpOption 2: Install with pip
pip install a11y-expert-mcpThen run:
a11y-expert-mcpOption 3: Run from source
git clone https://github.com/Elizabeth1979/a11y-expert-mcp.git
cd a11y-expert-mcp
uv run a11y-expert-mcpConfiguration
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. Wherea11y-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)
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Servers
- -license-quality-maintenanceAn MCP server that enables developers to summon AI development team agents directly from their IDE to help with tasks like PR reviews, security evaluation, and CI/CD deployment setup.Last updated
- Alicense-qualityCmaintenanceAn MCP server for accessibility auditing that provides WCAG 2.2 criteria lookup, HTML remediation guidance, and automated documentation generation for UI components. It enables users to analyze code snippets for issues and generate professional accessibility audit reports.Last updated243MIT

@accesslint/mcpofficial
Alicense-qualityFmaintenanceAn MCP server for WCAG accessibility auditing in AI coding agents, providing tools to audit HTML, files, URLs, and diffs, plus a prompt for React component auditing.Last updated6966MIT- Alicense-qualityDmaintenanceMCP server that provides access to web accessibility documentation, enabling search and retrieval of W3C WAI-ARIA patterns and accessibility best practices.Last updated2MIT
Related MCP Connectors
MCP server for AI agent profiles and smart notes. 60+ coding prompt packs with expert personas.
An MCP server that integrates with Discord to provide AI-powered features.
Driflyte MCP server which lets AI assistants query topic-specific knowledge from web and GitHub.
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/Elizabeth1979/a11y-expert-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server