Cursor A11y MCP

by westsideori
Verified

local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

  • Uses Puppeteer to enable accessibility testing on web applications by automating browser interactions to capture and analyze page content.

  • Provides accessibility testing for React applications, with specific support for testing React components for accessibility violations.

  • Leverages Zod for schema validation within the accessibility testing workflow to ensure proper data formatting and validation.

Cursor A11y MCP

A Model Context Protocol (MCP) server that provides accessibility testing capabilities AI agents. This tool helps identify accessibility issues in web applications using axe-core and Puppeteer.

Features

  • Run accessibility tests on any URL or local development server
  • Powered by axe-core for comprehensive accessibility testing
  • Provides detailed violation reports including:
    • Impact level
    • Description of the issue
    • Help text and documentation links
    • Affected HTML elements
    • Failure summaries

Project Structure

  • src/ - Source code for the MCP server and accessibility testing tool
  • test-site/ - A React application with intentional accessibility issues for testing
  • build/ - Compiled version of the source code

Installation

npm install

Then install the test site dependencies:

cd test-site npm install cd ..

Usage

Starting the MCP Server

npm run build npm start

Running the Test Site

npm run start:test-site

The test site will be available at http://localhost:5000.

Running Accessibility Tests

The tool accepts two types of inputs:

  1. A full URL to test
  2. A relative path that will be appended to http://localhost:5000

Dependencies

  • @modelcontextprotocol/sdk: ^1.4.1
  • puppeteer: ^24.1.1
  • zod: ^3.24.1

Test Site Dependencies

  • react: ^18.2.0
  • react-dom: ^18.2.0
  • react-scripts: 5.0.1

Development

  1. Make changes to the source code in the src/ directory
  2. Run npm run build to compile the changes
  3. Start the server with npm start

Configuring in Cursor

To add this accessibility testing tool to Cursor's MCP Server settings:

  1. Open Cursor's Settings (⌘ + ,)
  2. Navigate to "Features" > "MCP Servers"
  3. Add a new MCP Server with the following configuration:
    • Name: a11y
    • Select command from the dropdown
    • Command: node path/to/cursor-a11y-mcp/index/file/in/build/folder (Replace path/to/cursor-a11y-mcp/index/file/in/build/folder with the absolute path to your index.js file in the build folder.)
  4. Click Add
  5. The accessibility testing tool will now be available in Cursor's Composer

Usage in Composer

To use the accessibility testing tool in Cursor's Composer:

  1. Run in your terminal:
npm run start:test-site

This will start the test site at http://localhost:5000

  1. In Cursor's Composer, type use a11y tool
  2. Composer will prompt you to run the tool
  3. After running the tool, you will see the accessibility violations in the response, and code actions to fix the violations
  4. The Composer may prompt you to use the tool again to confirm that the violations are fixed

License

This project is licensed under the MIT License - see the LICENSE file for details.

Version

Current version: 2.0.1

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

Provides accessibility testing capabilities through CLI, helping identify accessibility issues in web applications using axe-core and Puppeteer.

  1. Features
    1. Project Structure
      1. Installation
        1. Usage
          1. Starting the MCP Server
            1. Running the Test Site
              1. Running Accessibility Tests
              2. Dependencies
                1. Test Site Dependencies
                2. Development
                  1. Configuring in Cursor
                    1. Usage in Composer
                      1. License
                        1. Version