Cursor A11y

A web accessibility testing tool based on axe-core and Puppeteer

Developer tools Law and compliance #Accessibility Testing #Web Page Detection #axe-core .JavaScript

rating : 2 points

downloads : 4.6K

update time : 2025-04-28

Open Site

What is the Cursor A11y MCP Server?

Cursor A11y MCP is a Model Context Protocol (MCP) server designed specifically for accessibility (A11y for short) testing. It uses the axe-core tool to analyze whether there are accessibility issues on web pages and simulates browser behavior through Puppeteer to execute tests.

How to use the Cursor A11y MCP Server?

Simply provide the target URL or relative path, and the server will automatically run the accessibility test and generate a report. The report includes the impact level, description, solution of the problems, and the affected HTML elements.

Applicable Scenarios

It is suitable for scenarios where development teams want to quickly discover and fix web page accessibility issues, especially for enterprise projects that need to meet accessibility standards (such as WCAG).

Main Features

Comprehensive Accessibility Testing

Based on the axe-core tool, it covers various accessibility standards (such as WCAG) and identifies common issues.

Detailed Report

Generates a report containing the impact level, description, help text, and repair suggestions.

Supports Local Development Environment

It can easily test web pages in local development without deploying them online.

Advantages

Quickly locate accessibility issues

Supports multiple browser environments

Automatically generates reports to improve efficiency

Limitations

May not fully replace manual review

Has limited support for complex dynamic pages

How to Use

Install Dependencies

Run npm install to install the required dependency packages.

Start the MCP Server

Compile the source code and start the server.

Test the Target Website

Enter the URL or relative path to start the test.

Usage Examples

Test a Local Development Site

Verify accessibility issues in a local environment.

Remote URL Testing

Detect the accessibility status of external websites.

Frequently Asked Questions

How to add this tool to Cursor?

Does it support testing multi - language web pages?

How to confirm that the problem has been solved after the test is completed?

Related Resources

Official Documentation

Details the functions and usage methods of Cursor A11y MCP.

GitHub Code Repository

An open - source code repository for developers to contribute and modify.

Accessibility Standard Reference

Understand international accessibility standards.

🚀 Cursor A11y MCP

A Model Context Protocol (MCP) server that provides accessibility testing capabilities, helping to identify accessibility issues in web applications. It uses axe - core and Puppeteer for testing.

✨ Features

Run accessibility tests on any URL or local development server.
Powered by axe - core for comprehensive accessibility testing.
Provide detailed violation reports, including:
- Impact level
- Violation description
- Help text and documentation links
- Affected HTML elements
- Failure summary

📦 Project Structure

src/ - Source code for the MCP server and accessibility testing tools.
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 Examples

Basic Usage

Start the MCP Server

npm run build
npm start

Run the Test Site

npm run start:test - site

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

Run Accessibility Tests

The tool accepts two types of input:

A full URL to test.
A relative path appended to http://localhost:5000.

Advanced Usage

The advanced usage is similar to the basic usage, but you can customize the testing URL or path according to your needs.

📚 Documentation

Dependencies

Property	Details
Main 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

Make modifications to the src/ directory in the source code.
Run npm run build to compile the changes.
Start the server using npm start.

Configuration in Cursor

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

Open Cursor's settings (⌘ + ,).
Navigate to "Features" > "MCP Servers".
Add a new MCP server with the following configuration:
- Name: a11y
- Select command from the dropdown menu.
- 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 the index.js file in the build folder.)
Click Add.
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:

Run the following command in the terminal:

npm run start:test - site

This will start the test site at http://localhost:5000. 2. Enter use a11y tool in Cursor's Composer. 3. The Composer will prompt you to run the tool. 4. After running the tool, you will see accessibility violations in the response, along with code action items to fix the violations. 5. The Composer may prompt you to run the tool again to confirm that the violations have been fixed.