mcp-accessibility-scanner weekly downloads statistics

MCP Accessibility Scanner 🔍

Accessibility checks inside your coding agent: axe scans, keyboard-focus checks and repeatable reports.

An intentionally flawed local demo page, checked with automated tools. These annotations were generated by scan_page with annotateScreenshot: true, not added by hand.

This MCP server lets your coding agent inspect a page, run axe checks, exercise keyboard focus and save findings for review. Automated checks don't certify WCAG compliance; manual accessibility testing is still needed. audit_screen_reader inspects the browser's accessibility tree, accessible names and element geometry. It does not test with an actual screen reader.

Quickstart: connect your coding agent

Install Google Chrome before the first audit. The configuration below uses system Chrome; installing the npm package does not install a browser. See browser configuration for alternatives.

Install the scanner:

npm install -g mcp-accessibility-scanner --allow-scripts=re2

The flag allows the native re2 dependency to install on npm 12. If a prebuilt binary is unavailable, its installer needs a native build toolchain; see re2's installation notes.

Add this stdio server to your coding agent's MCP configuration, then restart or reconnect the client:

{
  "mcpServers": {
    "accessibility-scanner": {
      "command": "mcp-accessibility-scanner",
      "args": ["--headless", "--isolated", "--output-dir", "./a11y-output"]
    }
  }
}

The client must be able to find the installed command on its PATH. --isolated uses a fresh browser profile, not your personal Chrome session. Output paths are relative to the server's working directory; use an absolute --output-dir if your client starts it elsewhere. Client-specific setup and other installation methods are in the reference below.

Your first audit

Start your app locally, then ask your connected coding agent to run these tools in order, replacing the URL with your app's address:

browser_navigate {"url":"http://localhost:3000"}
scan_page {"annotateScreenshot":true}
audit_keyboard {"maxTabs":30}
audit_screen_reader {}

These are MCP tool calls, not shell subcommands. For terminal use, see interactive mode.

scan_page returns text findings with JSON node details and remediation links. With annotateScreenshot: true, it also saves a full-page annotated PNG and returns a file resource link. It does not save a JSON report. audit_keyboard and audit_screen_reader save JSON reports and return summaries and report links; audit_site and scan_page_matrix also save JSON reports. There is no generated HTML report dashboard. Review incomplete checks, coverage warnings and the page states you haven't tested.

To reproduce the screenshot, serve the demo from this repository with python3 -m http.server 8765 --bind 127.0.0.1 --directory docs/assets, navigate to http://127.0.0.1:8765/accessibility-demo.html, then run scan_page with annotateScreenshot: true. The screenshot used a 1000×720 viewport (--viewport-size 1000,720).

Badges

Star History

Features

Accessibility Scanning

✅ Automated checks for WCAG 2.0/2.1/2.2 criteria (A, AA, AAA levels)
📄 Saved JSON audit reports and scan findings with remediation guidance
🎯 Support for specific violation categories (color contrast, ARIA, forms, keyboard navigation, etc.)

Browser Automation

🖱️ Click, hover, and drag elements using accessibility snapshots
⌨️ Type text and handle keyboard inputs
🔍 Capture page snapshots to discover all interactive elements
📸 Take screenshots and save PDFs
🎯 Support for both element-based and coordinate-based interactions

Advanced Features

📑 Tab management for multi-page workflows
🌐 Monitor console messages and network requests
⏱️ Wait for dynamic content to load
📁 Handle file uploads and browser dialogs
🔄 Navigate through browser history

Installation

You can install the package using any of these methods:

Using npm:

npm install -g mcp-accessibility-scanner --allow-scripts=re2
```…