Wcag 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

git clone https://github.com/yourusername/wcag-accessibility-server.git
cd wcag-accessibility-server

2. Install dependencies

npm install

3. Build the project

npm run build

Usage

1. Start the server

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

// 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

// 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

// 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.