mcp-wcag-server

# WCAG Accessibility Server A Model Context Protocol (MCP) server that provides WCAG accessibility guidelines, tools, and resources for web developers. ## Features - **WCAG Guidelines**: Access to Web Content Accessibility Guidelines versions 2.0, 2.1, 2.2, and 3.0 - **Accessibility Tools**: Check your code for WCAG compliance - **Color Contrast Analysis**: Verify color combinations meet accessibility standards - **ARIA Validation**: Check proper usage of ARIA roles and attributes - **Accessible Component Examples**: Generate accessible code examples ## WCAG Support This server provides support for multiple WCAG (Web Content Accessibility Guidelines) versions: - WCAG 2.0 (2008) - WCAG 2.1 (2018) - WCAG 2.2 (2023) - WCAG 3.0 (Working Draft) ## Prerequisites - Node.js 16.x or higher - npm or yarn ## Installation 1. Clone the repository ```bash git clone https://github.com/yourusername/wcag-accessibility-server.git cd wcag-accessibility-server ``` 2. Install dependencies ```bash npm install ``` 3. Build the project ```bash npm run build ``` ## Usage 1. Start the server ```bash npm start ``` 2. The server will be running at http://localhost:3000 (or the PORT specified in your .env file) 3. Connect to the MCP endpoint at http://localhost:3000/mcp-sse using an MCP client ## Available Prompts - **accessibility-component**: Get accessibility best practices for specific UI components - **wcag-compliance**: Get a compliance checklist for specific features - **color-contrast**: Get guidance on meeting WCAG color contrast requirements - **keyboard-navigation**: Get guidance on implementing keyboard navigation - **aria-usage**: Learn how to properly use ARIA attributes - **accessible-names**: Get guidance on providing accessible names for elements ## Available Tools - **check-accessibility**: Analyze code for accessibility issues based on WCAG guidelines - **generate-accessible-example**: Generate accessible code examples for common components - **validate-aria**: Validate ARIA attributes and roles in HTML code - **color-contrast**: Analyze color contrast for WCAG compliance ## Examples ### Checking Code Accessibility ```javascript // Using the check-accessibility tool const result = await client.callTool('check-accessibility', { code: '<button onclick="doSomething()">Click me</button>', codeType: 'html', wcagVersion: '2.2' // or '2.0', '2.1', '3.0' }); console.log(result.content[0].text); ``` ### Analyzing Color Contrast ```javascript // Using the color-contrast tool const result = await client.callTool('color-contrast', { foreground: '#333333', background: '#FFFFFF', textSize: 'normal' // or 'large' }); console.log(result.content[0].text); ``` ### Getting Accessibility Guidelines ```javascript // Using the accessibility-component prompt const prompt = await client.getPrompt('accessibility-component', { component: 'dropdown', wcagVersion: '2.2' }); console.log(prompt.messages[0].content.text); ``` ## Testing WCAG Features Run the test script to verify WCAG functionality: ``` npm run test:wcag ``` ## Development This project uses TypeScript and follows the Model Context Protocol (MCP) specification. It is designed to help web developers create more accessible applications by providing guidance on WCAG standards and best practices. ## License MIT ## Contributing Contributions are welcome! Please feel free to submit a Pull Request.