Click on "Deploy 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 MCP Review 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.
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.
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. |
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) |
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. |
Browsable knowledge base for MCP clients:
a11y://patterns ā Index of all 33 component patterns
a11y://patterns/{component} ā Full pattern detail for any component
Related MCP server: @accesslint/mcp
Python 3.11+
uv (recommended) or pip
uvx a11y-expert-mcppip install a11y-expert-mcpThen run:
a11y-expert-mcpgit clone https://github.com/Elizabeth1979/a11y-expert-mcp.git
cd a11y-expert-mcp
uv run a11y-expert-mcpAdd 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"
]
}
}
}Use the same command and args ā check your editor's MCP configuration docs for the exact config file location.
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.
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.
MCP SDK (FastMCP)
Python 3.11+
WAI-ARIA Authoring Practices knowledge base (bundled markdown files)
Part of a broader accessibility engineering toolkit. Pair this with:
screen-reader-cli ā CLI for screen-reader-driven testing. Where a11y-expert-mcp gives your AI assistant static guidance (patterns, code review), screen-reader-cli runs 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.
MIT
Elli (@Elizabeth1979)
Check if two colors meet WCAG contrast ratio requirements.
Args:
foreground: Foreground color as hex (e.g., "#333333" or "333").
background: Background color as hex (e.g., "#ffffff" or "fff").
Returns:
Contrast ratio and pass/fail for WCAG AA and AAA levels.
| Name | Required | Description | Default |
|---|---|---|---|
| foreground | Yes | ||
| background | Yes |
| Name | Required | Description |
|---|---|---|
| result | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Partially discloses behavior by describing return values (ratio and pass/fail), but does not cover error handling, side effects, or authentication needs. Without annotations, more detail would be beneficial.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two concise paragraphs covering purpose, arguments, and returns. No unnecessary words, well-structured for quick scanning.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Complete for a simple two-parameter tool with output schema: describes return content, no missing context. Handles the task fully.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Adds significant meaning beyond the schema: explains hex format with examples ('#333333' or '333'), distinguishes foreground and background roles. With 0% schema coverage, description fully compensates.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states the tool checks if two colors meet WCAG contrast ratio requirements, specifying use of hex colors and pass/fail for AA and AAA. Distinguishes from siblings like get_pattern and list_patterns which serve different purposes.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Implies usage for accessibility contrast checking but lacks explicit guidance on when to use this tool versus alternatives, or any conditions where it should not be used. No exclusions or context provided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Get the accessible implementation pattern for a UI component.
Args:
component: The component name (e.g., "modal", "tabs", "combobox",
"carousel", "menu", "dialog", "tooltip", "alert",
"switch", "listbox", "treeview", "slider", "feed",
"grid", "disclosure", "landmarks", "headings", "buttons",
"link", "spinbutton", "meter", "menu button").
Returns:
Detailed WAI-ARIA Authoring Practices pattern with code examples,
keyboard interaction requirements, and ARIA roles/states/properties.
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes |
| Name | Required | Description |
|---|---|---|
| result | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It doesn't disclose whether the operation is read-only, requires authentication, or has side effects. The return content is described, but behavioral traits like nondestructive nature are omitted.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is succinct and well-structured with 'Args:' and 'Returns:' sections. Every sentence adds value, and the main purpose is stated upfront without unnecessary words.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with one parameter, the description covers purpose, input examples, and return details. It lacks information on error conditions or prerequisites, but the output description is rich. Overall, it provides a complete picture for a simple retrieval tool.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 0%, so the description must explain the parameter. It lists many example values and explains that the component name is expected. This adds significant meaning beyond the bare schema definition, though it doesn't specify constraints or error handling.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Get the accessible implementation pattern for a UI component.' The verb 'get' and resource 'implementation pattern' are specific, and it distinguishes from siblings like 'list_patterns' which likely handles listing patterns.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description clarifies that the tool is used to fetch a detailed pattern for a given component, but it doesn't provide explicit when-not-to-use guidance or compare with sibling tools. It assumes the user knows to call it when they need specific ARIA practices, missing exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
List all available accessible component patterns.
Returns:
A list of all component patterns available in the knowledge base.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
| Name | Required | Description |
|---|---|---|
| result | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. It indicates a read-only operation that returns a list, but lacks details on potential pagination, rate limits, or access control. The description is adequate but minimal.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise, with two sentences that directly state the tool's purpose and return value. Every sentence is essential and there is no redundancy.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple list tool with no parameters and an output schema (not shown), the description sufficiently covers its purpose and return format. No additional details are necessary given the tool's straightforward nature.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has no parameters, and schema coverage is trivially 100%. The description appropriately adds no extra parameter information, which is acceptable for zero-parameter tools (baseline 4).
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool lists all available accessible component patterns, with a specific verb 'list' and resource 'component patterns'. It distinguishes from siblings like get_pattern (which likely retrieves a single pattern) and review_code (different function).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives like get_pattern or check_contrast. Given sibling tools exist, this lack of context may lead to incorrect tool selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Review code for accessibility issues and suggest fixes.
Args:
code: The HTML, JSX, TSX, Vue, or Svelte component code to review.
component_type: Optional hint about what the component is
(e.g., "modal", "dropdown", "form").
Returns:
Accessibility issues found with specific fix suggestions and
references to WAI-ARIA patterns.
| Name | Required | Description | Default |
|---|---|---|---|
| code | Yes | ||
| component_type | No |
| Name | Required | Description |
|---|---|---|
| result | Yes |
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations provided, so description carries burden. It discloses the tool finds issues, suggests fixes, and references WAI-ARIA patterns. Lacks details on output format or edge cases, but adequate for an analysis tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two-line purpose followed by concise arg/return docs. Every sentence adds value, no wasted words. Front-loaded with main action.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's simplicity (two params, returns issues), the description covers inputs and outputs sufficiently. With an output schema presumably available, full completeness is achieved.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 0%, so description must compensate. It adds context for 'code' (acceptable formats) and 'component_type' (examples like modal, dropdown), improving understanding beyond type alone.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
Clearly states 'Review code for accessibility issues and suggest fixes,' with a specific verb and resource. Differentiates from siblings (check_contrast, get_pattern, list_patterns) which focus on contrast or pattern retrieval.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Describes the context for use (reviewing code for accessibility) but does not explicitly state when not to use or suggest alternatives. Clear enough for an agent to infer usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
v0.1.0check_contrastget_patternlist_patternsreview_codeScored across 4 tools
Each tool has a clearly distinct purpose: color contrast checking, retrieving patterns, listing patterns, and reviewing code. No overlap in functionality.
All tool names follow a consistent verb_noun pattern (check_contrast, get_pattern, list_patterns, review_code), making the API predictable.
With 4 tools, the server is well-scoped for its niche. It covers the core needs of an accessibility expert without being too sparse or bloated.
The server covers contrast checking, pattern reference, and code review. It lacks a dedicated tool for keyboard navigation testing or automated audit, but review_code can handle many issues.
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.
The OpenZeppelin Solidity Contracts MCP server integrates OpenZeppelin's security and style rules into AI-driven development workflows, enabling AI assistants to generate safe, correct, and production-ready smart contracts. It automatically validates generated code against OpenZeppelin standards (including imports, modifiers, naming conventions, and security checks) and supports various contract types including ERC-20, ERC-721, ERC-1155, Stablecoins, RWA, Governor, and Account contracts through prompt-driven workflows.
Use AI models for chat, image, and video generation from Claude Code and other MCP hosts.
