Skip to main content
Glama

a11y

Identify and test accessibility issues on websites or local development paths using axe-core and Puppeteer, ensuring web applications meet accessibility standards.

Instructions

Run accessibility tests on a URL or a local path (relative URL appended to http://localhost:5000).

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
relativePathNoRelative path appended to http://localhost:5000
urlNoFull URL to test

Implementation Reference

  • The core handler function that executes the a11y tool: launches a headless browser with Puppeteer, navigates to the provided URL or localhost path, injects axe-core, runs accessibility tests, formats violations, and returns them as JSON.
    export async function runA11yTool(args) {
      // Determine final URL
      let finalUrl = args.url;
      if (!finalUrl) {
        if (!args.relativePath) {
          throw new Error("Must provide either 'url' or 'relativePath'");
        }
        finalUrl = `http://localhost:5000/${args.relativePath.replace(/^\//, '')}`;
      }
    
      // Launch Puppeteer
      const browser = await puppeteer.launch({
        headless: 'new',
      });
      const page = await browser.newPage();
    
      // Navigate to URL
      await page.goto(finalUrl);
    
      // Inject and run axe-core
      await page.addScriptTag({
        url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.7.0/axe.min.js',
      });
    
      // Run axe
      const results = await page.evaluate(() => {
        return new Promise((resolve) => {
          axe.run((err, results) => {
            if (err) throw err;
            resolve(results);
          });
        });
      });
    
      await browser.close();
    
      // Format results for output
      const violations = results.violations.map((violation) => ({
        impact: violation.impact,
        description: violation.description,
        help: violation.help,
        helpUrl: violation.helpUrl,
        nodes: violation.nodes.map((node) => ({
          html: node.html,
          failureSummary: node.failureSummary,
          target: node.target,
        })),
      }));
    
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify(
              {
                violationCount: violations.length,
                violations: violations,
              },
              null,
              2
            ),
          },
        ],
      };
    }
  • Zod schema for validating the input arguments to the a11y tool: optional url or relativePath.
    export const A11yToolSchema = z.object({
      url: z.string().optional(),
      relativePath: z.string().optional(),
    });
  • src/index.js:31-54 (registration)
    Registers the a11y tool in the MCP listTools handler, providing its name, description, and input schema.
    server.setRequestHandler(ListToolsRequestSchema, async () => {
      return {
        tools: [
          {
            name: a11yToolName,
            description: a11yToolDescription,
            inputSchema: {
              type: 'object',
              properties: {
                url: {
                  type: 'string',
                  description: 'Full URL to test',
                },
                relativePath: {
                  type: 'string',
                  description: 'Relative path appended to http://localhost:5000',
                },
              },
              required: [],
            },
          },
        ],
      };
    });
  • src/index.js:60-63 (registration)
    In the MCP callTool handler, matches on a11y tool name, validates arguments using the schema, and invokes the runA11yTool handler.
    case a11yToolName: {
      const validated = A11yToolSchema.parse(args);
      return await runA11yTool(validated);
    }
  • Constants for the tool name and description used in registration and handling.
    export const a11yToolName = 'a11y';
    export const a11yToolDescription =
      'Run accessibility tests on a URL or a local path (relative URL appended to http://localhost:5000).';
Install Server

Other Tools

Related Tools

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/westsideori/cursor-a11y-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server