WCAG Aria patterns MCP
About
MCP server for WCAG practices found at https://github.com/karanshah229/wcag-aria-practices-mcp-skill/tree/main
Details
- Author
- karanshah229
- Categories
- Developer Tools, Knowledge Base
Jump to
Setup
Install WCAG Aria patterns MCP in your MCP client (Claude Desktop, Cursor, Windsurf, and others).
Repository: https://github.com/karanshah229/wcag-aria-practices-mcp-skill
Follow the installation instructions in the repository README, then restart your MCP client.
This repository maintains the WAI-ARIA Authoring Practices Guide (APG).
- Published at:w3.org/wai/aria/apg
- Developed by theAuthoring Practices Task Forceof theARIA Working Group
- Staff contact:Daniel Montalvo
Please do not provide commit access to this repository without coordination.
- Work is planned and prioritized in ourmilestones. Each milestone corresponds to a working draft or release published to w3.org.
- Work is organized by topic in ourprojects. Each project corresponds to a type of design pattern or section of guidance.
- Thescope of work and roadmapare described in the project wiki.
Prerequisites:Node.js andnpm install.
Use with Cursor:Add to your MCP settings (e.g. in Cursor settings or.cursor/mcp.json):
{ "mcpServers": { "wai-aria-apg": { "command": "node", "args": ["/path/to/aria-practices/mcp-server/index.mjs"] } } }
Replace/path/to/aria-practiceswith the actual path to your cloned repository. The AI can then fetch pattern specs via resources likeapg://pattern/accordionorapg://pattern/combobox.
For other MCP-compatible clients, see theModel Context Protocol documentation.
Cursor Skill:Copyskill/wai-aria-apgto.cursor/skills/in your project so the AI uses APG patterns when building accessible components. Seeskill/README.md.
- Comment in an existing issue or raise a new issue, expressing your willingness to help and briefly summarizing the nature of your proposed resolution.
- An editor will confirm there are no conflicting plans and, if needed, provide guidance.
- Be sure you have linters installed and configured as described below.
- Read our wiki page aboutsubmitting pull requests.
- Do some fabulous work and submit a pull request.
Note: Please feel free to ask questions either through an issue or on theAuthoring Practices Task Force mailing list.
This repository utilizeslintingtools to do static code analysis and ensure consistent code quality across HTML, CSS, and JavaScript. Each linting tool and respective code standards are documented below and in thecode guide.
Pull requests that contain linting errors will not be merged until the errors are resolved. To make this easier, you can install and run the tools locally before pushing code. Also note that the tools for CSS and JavaScript will automatically fix many issues if you have them installed locally. To install these tools:
- Make sure that you haveNode.jsinstalled, which comes withnode package manager (npm)
- Open the directory that contains youraria-practicesrepository in a terminal
- Runnpm install
The HTML validator also requires the installation of a JDK in order to run. If you don't already have a JDK installed,download the latest JDK from Oracle.
It is also highly recommended that you use a code editor that supports these tools andEditorConfig.
HTML is validated against theNU HTML Validator. Should a warning or error occur because a future ARIA feature is not yet implemented, it will be added to the.vnurc file, allowing the error to pass through.
CSS is validated bystylelintusing thestylelint-config-standardruleset.
NOTE: on commit, stylelint will be run on staged CSS files. If errors are found that can beautomatically fixed with the --fix flag, they will be fixed and the changes committed.
JavaScript is validated byESLint, usingour own config.
NOTE: on commit, eslint will be run on staged CSS files. If errors are found that can beautomatically fixed with the --fix flag, they will be fixed and the changes committed.
- Open a terminal window to the directory that contains thearia-practicesrepository
- The repository has a script defined that will test all JavaScript in the examples directory. To run it, execute the commandnpm test. Note: this may take a few minutes to run and will open several browser windows during the test that will gain focus.
- Many errors can be fixed automatically with the commandnpm run fix.
- After running fix, test again to see what you need to fix manually.
When the linter encounters errors, it will report them in the console. The error report will contain the file name and line number, and it will indicate the character or place in the line that raised the style violation. To fix an error, satisfy the change that the violation indicates.
For example, here is an error for an invalid variable name style. Variables must follow a camelCase convention.
/Users/user1/Documents/github/aria-practices/examples/slider/js/text-slider.js 19:8 error Identifier 'value_nodes' is not in camel case camelcase
The error occurred inexamples/slider/js/text-slider.js, on line 19 and the offending character is indicated by the number8after the colon. Change the variablevalue_nodestovalueNodesin your source file to eliminate this error.
To see the complete list of style rules that are applied by ESLint, review the.eslintrc.jsonfile in the root of the project.
See theAPG Editorial Style Guidelinesfor information about writing prose for the APG. TheReadMe for the ARIA specificationcontains additional useful editorial guidance.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
MCP server that generates production-grade engineering standards (SOLID, testing, architecture, CI/CD) for AI coding assistants
A test server demonstrating all features of the MCP protocol, including prompts, tools, resources, and sampling.
Local MCP that allows your agent to keep track of code analysis coverage
Bring agent evaluations, observability, and synthetic test set generation directly into your IDE for free with Galileo's new MCP server
MCP server for AI Diagram Maker — generate beautiful software engineering diagrams directly inside Cursor, Claude Desktop, Claude Code, or any MCP-compatible AI agent
MCP server that gives AI assistants on-demand access to 1,500+ amCharts docs, ~300 code examples, and 1000+ class API references.
One shared context layer for AI agents and humans — live API specs, DB schemas, and versioned contracts across repos so every agent and teammate works from the same source of truth.
Local stdio MCP server that lets AI coding agents read and maintain structured architecture, rules, and decisions directly from your repository.
The MCP server for Bitrix24 provides AI assistants with structured access to the Bitrix24 API. It delivers up-to-date method descriptions, parameters, and valid values, allowing assistants to work with precise data instead of guesswork. This reduces code errors and accelerates Bitrix24 integration development.
Browser automation via MCP for Chrome and Firefox
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
